How can i control gifs animations like on this website http://www.bauhem.com/

Design help General
1

in this website http://www.bauhem.com the gifs are starting to paint themselves once the user scroll them into view.
how can i achive this in webflow (the website is from webflow gallery so i guess its posibble. also there are animations happening on hover. please help i need this feature urgently. from what i have seen in the forums its not possible to control gifs directly thru webflow. is there an easy way to do this???

1 Like
2

Hey @Tal_Shpon :smile:

I’ve done a click to animate before on this page: www.silverdollarcity.com/firemanslanding#lucky

To implement a animate on hover, you’ll need to use the script I found on this page, and give your images an ID as well. You’ll need a static version of your gif loaded to the site, then go grab it’s src URL as well as the src URL for the animated GIF and place them accordingly within an HTML embed.

Would need to play around with it to build, but this should get you started on the right track. @bartekkustra may have an easier answer though. :smile:

Here’s the stackoverflow I found.
http://stackoverflow.com/questions/7473117/animating-a-gif-on-hover

<img id="imgDino" src="http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870" />

<script>
    $(function() {
        $("#imgDino").hover(
            function() {
                $(this).attr("src", "animated.gif");
            },
            function() {
                $(this).attr("src", "static.gif");
            }                         
        );                  
    });
</script>
1 Like
3

thanks for the answer. do you have any idea how to implement the same thing but with scroll as a trigger?

4

both hover and scroll a events (methods).

should be able to $(“#imgDino”).scroll(

$(parent.document).scroll(function() { … });

1 Like
5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.