Restart .gif every time it is scrolled into view?

Design help General
1

Hello Webflow users!

I stumbled upon a really cool website (www.milk.se) the other day and haven’t been able to stop thinking about since.

What caught my attention and interest was the animation that plays every time you scroll to a new section on the page (I assume this is a .gif that replays every time you revisit a certain section?).

My question is this; is it possible to do something similar in Webflow? Like, if i have a .gif that only play once. Can I trigger a “reload” of some sort whenever a certain section becomes visible again?

If possible, how do I do it?

I don’t have any links to a certain project that I’m working since I have no idea where to start :smile: just curious if it is possible and if so, how!!

I haven’t been able to find an answer to this question elsewhere, so hopefully one of you guys can help me!

Best regards
Victor

1 Like
2

Hey @VictorPersson,

Definitely a great question :blush:

What www.milk.se is using are animated SVGs.

After inspecting their code - it looks like they are taking advantage of the following SVG animation tool: vivus.js - svg animation

You can also view the GitHub repo at vivus.js - svg animation, or tinker with your own SVG at Vivus Instant - inline SVG animation with CSS

Hopefully this helps :blush:

Best regards,
Micah :nerd_face:

1 Like
3

Thank you soo much @micahryanhtml!!!

Never heard of animated SVGs before :smile: haha! But I’ll definitely try to look into it right away!

Do you know if this requires advanced coding skills, or is the vivus instant some kind of “workaround” for newbies like me who knows how to use Illustrator but not much about coding? :slight_smile: (really hope that it is)

Again, thank you for you help!

Best regards,
Victor

1 Like
4

Nice! Great question, @VictorPersson.

To have the control that www.milk.se has (triggering the animation on clicks) will require coding skills, but Vivus Instant does allow some manual control

With that said, you can have a simple animated SVG by dragging your file into the browser at Vivus Instant - inline SVG animation with CSS.

Take a look at the following video to see what I created:

I’ve never utilized an animated SVG with manual triggers, but I hope this gets you started in the right direction.

Hopefully this helps :nerd_face:

2 Likes
5

You’re awesome @micahryanhtml!

Thank you for making my first “forum-comment-experience” such a good one :smile: ! really appreciate the help!

Guess it’s time for me to start learning some code then! haha! Would be super-cool to have the same control as on milk.se :nerd_face:

Best,
Victor

1 Like
6

Oh definitely, no problem @VictorPersson

Happy to help! :nerd_face:

You may have inspired me to even dig more into SVG animations. When integrated well - they are pretty awesome.

Thanks,
Micah :blush: