ScrollTrigger elements one after another

[kodralex]

Hi,

 

I'm trying to animate two SVGs using scrollTrigger. I want the arrow to animate after the house animation is finished. But I'm struggling to figure this out. I'm guessing I'd need to move both items (that are currently separate) into one timeline and do it that way. Is this the correct approach?

 

Thanks,

Alex

See the Pen QWJyXYK by alexkodr (@alexkodr) on CodePen

[akapowl]

 

1 hour ago, kodralex said:

I'm trying to animate two SVGs using scrollTrigger. I want the arrow to animate after the house animation is finished. But I'm struggling to figure this out. I'm guessing I'd need to move both items (that are currently separate) into one timeline and do it that way. Is this the correct approach?

 

👍Yes, you're on the right track with timelines being the best approach for sequencing tweens - just remember; on timelines, ScrollTrigger objects don't go on any of the tweens, but on the timeline object itself instead.

 

Just set an end according to the scroll-distance you want that whole timeline to get scrubbed over, and (if not specified any different via the position parameter) all tweens in that timeline will get played in sequence one after the other.

 

Give it a shot yourself and if you have problems understanding anything, pop back with your questions.

 

And if you achieved what you tried, let us see the result.

 

[kodralex]

Perfect, thank you. I'll figure it out. Just wanted to make sure I was on the correct path.

[kodralex]

Updated to timeline approach and got it working great. One last question. If I've got an item appearing from behind a hidden area (in this case, the arrow). If it is a square/rectangle, I can wrap it in a container and set it to overflow: hidden. In this case, it's a custom shape. I'm using a clip-path. Is that the correct approach? Or would you do it a different way? I've updated the codepen so you can see what I mean (excuse the clip-path is slightly off at the minute).

 

Thanks

[akapowl]

Good job! 👍

 

..also on setting the clip-path (properly now it looks) - right, clip-paths would be one way to go to use custom shapes for 'hiding overflow'.

 

Depending on your needs and especially if things get more complicated, it might be easier in the long run to set everything up in one single SVG, so you don't have to worry about mismatching viewbox spaces e.g.

You could then also add the clipPath to the SVG itself - or alternatively use a mask.
 

Here are some ressources that might be helpful.

 

https://www.motiontricks.com/svg-masks-and-clippaths/

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking
 

See the Pen rNQeewB by akapowl (@akapowl) on CodePen

 

 

 

This here is the shape path I use for the clipping / masking for the SVG in the demo above.

 

See the Pen RwqaRrB by akapowl (@akapowl) on CodePen

 

 

 

 

[kodralex]

Ahh yes didn't even cross my mind to just do it all in one SVG. That would have been simpler from the get-go. Thanks for the example you generated 👍

 

This forum is great for learning. 

[kodralex]

I've created an update codepen with all the elements container within an SVG and a clipPath added. Much like @akapowl demo.

 

One thing that is really puzzling me. I've got rotationY: 90 set to one of the paths (.house) in the SVG. But it doesn't work. If I change from .house to the whole SVG, it works fine. Is there any reason this wouldn't work on a path?

 

See the Pen RwqaRqO by alexkodr (@alexkodr) on CodePen

[akapowl]

You can not apply 3D transforms on SVG paths (and other SVG elements), only on the SVG element itself. That is just a limitation of SVG.

 

What you could do as an alternative, is tween on scaleX (from 0 to 1) instead of rotationY - that would have a very similar visual effect in your usecase.

 

See the Pen BaGKLGR by akapowl (@akapowl) on CodePen

 

[kodralex]

Really good to know that thanks. That could have just saved me hours of trying to figure out why it wasn't working.