Streaming live at 10am (PST)

Trigger html animations on scroll

Hey guys, this is a two-in-one question blog post. I have a couple of html animations which I created in Adobe Animate and Tumult Hype and I’m currently hosting on Dropbox.

The first type of animations are banner animations and I want them to be triggered when the user scrolls into view. I was able to embed them inside a div and it worked but by the time the user scrolls into view they were already finished. I tried using the Scroll interaction but it didn’t work. What else could I use?

The second type of animations are hover animations. At the minute I have svgs representing each of the services my client offers but I want to replace the svg with a html animation when the user hovers over. I don’t have a clue on how to even start this.

Any ideas?
@Waldo @PixelGeek @cyberdave @VladimirVitaliyevich @thewonglv

Hi @Hector_Castro, do you have a link to the animations and could you share the embed code you were using?

Could you share the link to your site?

Also, which page are you embedding the animations? The more information that can be provided, the easier it will be to help find a solution.

Hi @cyberdave, thanks for your reply.

Here is the link to my site :

This is the banner that I want to animate when scrolled into view: If you load the page and scroll quickly enough, you can see the animation happening.

This are the icons that I want to replace with an HTML animation when hovered. At the minute they just change color.

This is the code that I have embedded using the :

iframe src=“
Exports/ArctitudProactiva/ArctitudProactiva.html” width=“1200px” height=“auto”>

Here is the link to the files in dropbox, I used Tumult Hype and I used the inbuilt “upload to Dropbox” function.

This topic was automatically closed after 60 days. New replies are no longer allowed.