Images animating on load and not when scrolled to / visible
-
I would like to have delayed animations of logos coming in but only after someone scrolls down to that section. I have a development site here (pw = “b3ck3r”:
j2.beckerstudio.com/contact-usIf you scroll down past the contact form, you’ll see 3 logos. They should fadedown when you scroll down to them. But when I view it, the images are already there. If I’m down on the page viewing the icons and hit refresh, the icons perform their animations as I defined.
Can you tell me how I can make sure the animations don’t kick off until we scroll down to them?
I hope this is possible.
Thanks so much!
-
Dear Chris,
Thanks for using the Animate It!
You can set Animate On: to Scroll in order to make the animations on Scroll. Please refer to this screenshot for more info:
Alternative, for already added animation, just change the short-code attribute from
animate_on= “load” to animate_on= “scroll” to make it work.________________________________________________________________
Another thing:
Also, I have noticed that the HubSpot Contact form you are loading has no height in the beginning. So initially the 3 logos are on the screen, and then pushed down by the form. This would make the logos fadeIn as soon as the page loads, because technically they are on the screen at the time of loading.To avoid this you can add the following custom CSS in Settings > Animate It > Custom CSS Box:
.page-contact-us .entry-content .first.one-half{ min-height: 715px; }This would push the 3 logos down the screen as soon as the page loads.
Please let me know if this works for you.
- The topic ‘Images animating on load and not when scrolled to / visible’ is closed to new replies.
