Jump to content
Search Community

Am I on the right track? GSAP ScrollTrigger Animation

Jamboo test
Moderator Tag

Recommended Posts

Hi all,

 

Just started my journey into animating SVGs with GSAP and am having a lot of fun. I just have a few questions in relation to what I've already done, and wondered if I'm on the right track/if there is a better way to do it.

 

I have an animation which is being pinned and scrubbed through with ScrollTrigger. The animation itself has 2 circles which animate towards the center of the screen and overlap like a venn diagram and then reveal a logo in the center. Before that plays, the bottom circle needs to animate upwards onto the screen. I've had a play around trying various ways to do this, but ultimately settled on SVGs being animated FROM the finished positions, as I was having a hard time animating them to always overlap/line up when animated TO the finished position. As you can see from the codepen, I do have it working roughly, but ultimately wanted to know if there's a better way to do it, as I think the current way with have issues with being responsive?

 

I'm not afraid of tackling the circle sizes/attributes with media queries etc (or GSAP.MediaMatch), but I feel like I'm missing something? I've looked into using transformOrigin to change the origin point of the circles, (top circle's origin could be the bottom, and the bottom circle's origin could be the top) and then I could control the scale, and they would always maintain the same overlap size maybe?

 

The end goal will also require me to have a text box in the top right and bottom left which will be there and fade out before the circles move. I'm sure I can do the animation with the timeline, but also wondered the best way to include separate text in this instance?

 

Thanks for any help in advance, and I hope I'm not too far off the mark lol.

 

Cheers!

 

See the Pen JjLzyjo by NMJamboo (@NMJamboo) on CodePen

Link to comment
Share on other sites

Hi @Jamboo welcome to the forum! 

 

I would not bother with .set() if I know where the elements should come from and they are already in their position. Animating .from() is then all you need. I also didn't see why you would had to use two ScrollTriggers one seems to do the trick. 

 

Because all your elements are part of the SVG they are responsive, because you can just scale down or up the SVG as much as you want and everything will be scoped to the SVG viewbox. You could look in to svgOrigin (below a good post about it), but I don't know why you would need it. 

 

32 minutes ago, Jamboo said:

The end goal will also require me to have a text box in the top right and bottom left which will be there and fade out before the circles move. I'm sure I can do the animation with the timeline, but also wondered the best way to include separate text in this instance?

 

I don't know what you mean with the above text, but I would make it part of the SVG and indeed add it to the timeline. 

See the Pen rNdRzEe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Gook luck!

  • Like 4
Link to comment
Share on other sites

@mvaneijgen Thank you so much for the help and for the kind welcome!

 

Everything you said was very clear and makes perfect sense! I forked your codepen, took your advice regarding the text assets, and have now included them in the SVG. I ended up nesting the text in with the circle groups as they animate together, but text seems a little hard to work with in regards to text wrap lol. After some research I came across tspan which seems a bit messy, but gets the job done correctly.

 

See the Pen jOzJZQr by NMJamboo (@NMJamboo) on CodePen

 

I now have the required animation, but just a few final questions.

 

Timing

I've used the position parameter to add delays to the animations but from what I read the actual scrub controls the speed of the moving elements? Does that mean that I need to increase the scrollTriggers end value, which will in turn "slow" down the animation?

 

Scaling

In regards to scaling, when I shrink down the size of the browser viewPort it seems to work to some extent, but when it gets ~<800px the circles start to get cut off at the start of the animation. I assume this is because the browser is smaller than my SVGs viewBox (500x900), have I set that up correctly?

For mobile, I think I'll end up making a more vertical animation anyway with GSAP.MediaMatch, so this is a bit of an extreme case.

 

Bootstrap

For the actual website I was thinking about using Bootstrap 5, will scrollTrigger/GSAP be affected in any way?

 

Thanks once again for the help!

 

Link to comment
Share on other sites

Oh yeah, lots of text in an svg can get messy. 

 

Yeah let say every tween is 1 second and you have 10 tweens, your animation will be 10 seconds long, but if you hook it up to scrolltrigger and only have 1000px to scroll you'll play a tween every 100px. If you want it to go slower you'll need to increase the scroll time.

 

The text is indeed getting a bit small. You could separate out the text and the SVG and just overlap them using position: absolute;

 

Nope, works fine. 
 

Good luck!

  • Like 3
Link to comment
Share on other sites

13 hours ago, Jamboo said:

Bootstrap

For the actual website I was thinking about using Bootstrap 5, will scrollTrigger/GSAP be affected in any way?

 

One pitfall with Bootstrap is that it will likely be adding scroll-behavior: smooth to your page ( from what I can tell to the :root ), which is bound to interfere with all sorts of scroll-related plugins, so best make sure to override that - it might spare you some headaches.

 

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...