kodralex Posted June 16, 2023 Share Posted June 16, 2023 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 Link to comment Share on other sites More sharing options...
akapowl Posted June 16, 2023 Share Posted June 16, 2023 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. 1 Link to comment Share on other sites More sharing options...
kodralex Posted June 16, 2023 Author Share Posted June 16, 2023 Perfect, thank you. I'll figure it out. Just wanted to make sure I was on the correct path. Link to comment Share on other sites More sharing options...
kodralex Posted June 16, 2023 Author Share Posted June 16, 2023 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 Link to comment Share on other sites More sharing options...
Solution akapowl Posted June 16, 2023 Solution Share Posted June 16, 2023 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 3 Link to comment Share on other sites More sharing options...
kodralex Posted June 16, 2023 Author Share Posted June 16, 2023 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. 1 Link to comment Share on other sites More sharing options...
kodralex Posted June 16, 2023 Author Share Posted June 16, 2023 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 Link to comment Share on other sites More sharing options...
akapowl Posted June 16, 2023 Share Posted June 16, 2023 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 2 Link to comment Share on other sites More sharing options...
kodralex Posted June 16, 2023 Author Share Posted June 16, 2023 Really good to know that thanks. That could have just saved me hours of trying to figure out why it wasn't working. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now