Add a slide in transition to 'Image with text" section on scroll - animation cheat sheet included

laurenmetcalfe2
New Member
1 0 0

Would love to have images slide in on scroll in the homepage. Here is an example of what i mean: https://www.wowhydrate.com/.

My website is https://24kjuice.co.uk/ and any help is much appreciated!

I've found a css animation cheat sheet here www.justinaguilar.com/animations/index.html but not sure how to implement it in my code.

0 Likes
Ninthony
Shopify Partner
1898 285 745

Having an animation like that is definitely eye catching, but just cause it looks cool doesnt mean it's going to be something that fits your use case. Based on your website, you don't really have the kind of set up to implement the same kind of thing they did. You just don't have enough content set up. If I were you, at the moment I would put that on the backburner and focus more on getting a little more content up. 

The way you can add those animations though is by using HTML, CSS, and Javascript. You'll have to add class names to your elements that you want to have slide in, then you'll need to set up the CSS and add a transition property to them for the transform property and the opacity property. Set the transformX to -100% or 100% depending on if they are on the left or right side, and the opacity to 0. Then you'll set up a new class in CSS that will apply an opacity of 1 and transformX to 0. 

Then, in javascript you'll set up an intersection observer:

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

 

When that callback function runs, add the class name that applies the opacity of 1 and the transformX to 0. 

It all sounds incredibly complicated, but it's not too much. You just have to have a pretty solid understanding of web development fundamentals. I'd be happy to walk you through it in a little more detail after you're all set up. Feel free to reach out whenever.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes