I'm looking for opinions

[SalvoDee 0 Likes (Newbie)]

Hi guys,

this is my first attempt with GSAP, i would like to have any opinion for improve performance or the animation.

See the Pen LjXYgW by SalvoDee (@SalvoDee) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi @SalvoDee

 

Welcome to the forum.

 

Instead of using tweens with delays, you should take a look at using a timeline for that animation. If you're using delays and you move one tween or change its duration, the whole sequence is going to break. Timelines make that type of work super easy.

https://greensock.com/timelinemax

 

You can play them in sequence, overlap them or make them wait a bit to start. You do this by using the position parameter. More info:

https://greensock.com/position-parameter

 

You can use the jQuery selector for your target, but if you want to save some typing, you can just write it like this too:

TweenLite.to('#mission .grid-item', 1.2, {width:"100%", opacity: 1,ease:Expo.easeIn});

 

To get started, these are great resources if you haven't seen them yet:

https://greensock.com/jump-start-js

https://greensock.com/get-started-js

 

Hopefully that helps. Happy tweening.