Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sameer Khan

set Relative Animation End Point responsive

Recommended Posts

Hi there i am new to Greensock and have created this animation with TweenMax and CustomWiggle , 

 

I wanted to ask you that I want the Ball from Logo to The Word Hello.( To the Dot of The Hello.) I Achieved it but the main problem is the position of the ball remain constant when i decrease Screensize , i want to ask How can i achieve this that take ball from logo and after Bounce ends , I want to make that ball goes into the Hello(Dot) and remain its position fixed with the Hello so when i move to the Smaller Screens i want to go the ball to that point ,.... Please Help i wwant it Responsive for All Devices so Help me.

 

 

I Hope you Understand the Question Please find animation in above codepen link 

See the Pen aMGrKV by pixelswd44 (@pixelswd44) on CodePen

Link to post
Share on other sites

Hi Sameer,

 

Welcome to the forums.

 

To achieve what you are after what you need to do is make sure that none of the transforms applied to your tweened element are left at the end of the animation. For that you want to use clearProps - have a read in the CSSPlugin documentation.

 

Another thing you want to do to make your life easier is to animate .from(), rather than .to(). Working backwards with your animation will help you as you will know where the element end as soon as you start working. Rather than creating the whole thing and, at the end, trying to make sure it lines up with your design.

 

See the Pen wOXwZB by dipscom (@dipscom) on CodePen

 

Happy Tweening!

  • Like 4
Link to post
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.

×