[animation on hover - set initial state of tween without animating]

 

Hi tomheaps 

 

Welcome to the GreenSock forum.

 

You can set the progress of the timeline to 1 like this:

shapes.each(function(index, element) {
tl.to(element, 0.7, {
scale: Math.random() * 2,
rotationX: randomNumber(-80, 180),
yPercent: randomNumber(-100, 100),
xPercent: randomNumber(-100, 100),
transformOrigin: "bottom center",
ease: Power4.easeIn
}, index * 0).progress(1)
})

More information about progress():

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/

 

Hopefully that helps a bit.

 

Happy tweening.

 

Thank you so much for your prompt response.

 

I spent hours on this yesterday and your solution is so simple!

 

There are many things I still need to learn about GSAP.....

[animation on hover - set initial state of tween without animating]

Please can anybody help - I am new to GSAP and my jquery skills require improvement.

 

I have worked out how to create random transforms on every path of an SVG image to create a dispersed vector polygon effect.

 

I then want to animate these vectors back to their initial state when hovering a link so that the image forms and have achieved this.

 

What I am struggling to do is that when the page initially loads, I want the dispersed vector image to display immediately i.e. not animate to the dispersed state and only begin to animate to / from the images original state when you hover on the link.

 

Please check out my codepen - any help gratefully received...

See the Pen Kavzvz by tomheaps (@tomheaps) on CodePen