Jump to content
GreenSock

tomheaps

animation on hover - set initial state of tween without animating

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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():

 
Hopefully that helps a bit.
 
Happy tweening.
:)
  • Like 2
Link to comment
Share on other sites

 

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():

 
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.....

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.
×