on click problems view transition

[Vulture]

Hi im having an issue when i click for the first time in the button to animate the div this one jump and then start the transition with normality, where is the problem ? here i left a pen, thank you !

See the Pen vpGvZb by JulesthanP (@JulesthanP) on CodePen

[Sahil]

Not sure what happened to demo I posted, it was working while I was editing it. Anyway, you can do it like this and save yourself from all the calculation.

 

See the Pen JMKPgd?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

[Carl]

Great solution, Sahil!

 

@vulture, Welcome to the forums.

 

I had a bit of trouble assessing what you wanted your code to do. I'm sure you're just starting out with GSAP, no worries, there is a lot to explore.

 

One of the great strengths of GSAP is its ability to group animations together in sequences called Timelines. Animations in a timeline do not have to follow a strict one-after-the-other pattern. They can overlap and even have gaps. You can even nest timelines in timelines.

 

As you can see by Sahil's demo the 2 animations follow perfectly in sequence. No need for onComplete callbacks and setTimeout().

Also, if you want to set properties instantly (no animation) you can use the set() method. https://greensock.com/docs/TweenLite/static.set()

I'm sure you will love timeline's once you get comfortable with them.

 

Take a look at these articles / videos

 

https://greensock.com/sequence-video

https://greensock.com/position-parameter

 

Good luck on your project.

Happy Tweening!