[Multiple non-scrubbed animation steps inside a scrolltrigger timeline]

Snapping - how elegant.  Exactly what I was looking for!

Thank you so much 🥰

[Multiple non-scrubbed animation steps inside a scrolltrigger timeline]

Hey mvaneijgen than you for your answer! 

 

I already have the animation - the part that is missing is the "hooking it up to scrolltrigger".

I created a demo with a very simple animation that has 2 stages. As you can see the entire animation happens at once.

 

See the Pen PoegJQN by adelkov (@adelkov) on CodePen

 

I would like the box to transition to yellow when the trigger (blue) area hits the top of the page. 

The blue area should be pinned.

When this transition is finished I would like to be able to scroll further (trigger area still pinned) and have the box transition to green.

When this is finished playing the pinning should be released.

 

[Multiple non-scrubbed animation steps inside a scrolltrigger timeline]

Hi!

I would like to create a timeline animation that has three stages and that is pinned.

I would like the transitions between the stages to happen without scrubbing, but not all transitions should happen right after the other, each subsequent transition would be triggered by further scrolling.

 

My goal would be implementing something very similar to what is showcased below (Fifth section of the page):

https://ooono.dk/products/ooono-codriver-no1 

 

Could you please advice me on what approach I should take?

Thank you for your help

[Positioning element inside a sliced SVG to the corner of the screen]

Thank you both for the answers
I ended up using the Flip plugin - it was precisely what I needed.

 

What an amazing library and community, thank you so much! 🙏

[Positioning element inside a sliced SVG to the corner of the screen]

Hey guys!

I have an SVG that has to cover the entire viewport, so I added "xMidYMid slice" for aspect ratio, but now I am unable to position an element inside it.

I would like to scale down the globe logo to a given size (54px) and move it exactly to the top left corner.

Could you please help me out? 😇

See the Pen rNdxmwb?editors=1010 by adelkov (@adelkov) on CodePen