Jump to content
Search Community

addPause and Image Easing

jamesdutt test
Moderator Tag

Recommended Posts

I am trying to adapt a technique from a Creative Coding Club video (which animates text to zoom in, get larger, then zoom out) to work with an image. I've got it working as I want, but would like to add a pause at the beginning so that the original small image displays for a few seconds, then the zooming begins. I thought addPause would be the answer, but when I add it to the beginning of the timeline, the animations does not play at all.  In the codepen, if you uncomment the first line of the init function, the animation works. Thanks for any help.

 

See the Pen zYraMrq by jamesdutt (@jamesdutt) on CodePen

Link to comment
Share on other sites

That's not exactly what I want. I would like the originally sized image to appear on screen for a few seconds, then the animation starts. Your pen adds a delay before anything appears. I'm not sure why your solution doesn't work because autoAlpha makes the image visible, then init() begins the timeline with a delay built into it.

Link to comment
Share on other sites

24 minutes ago, jamesdutt said:

I'm not sure why your solution doesn't work because autoAlpha makes the image visible, then init() begins the timeline with a delay built into it.

That's because the timeline sets a scale and opacity of 0.

 

If you want it to show for a bit and then animate then you'd need to delay the call of the function:

See the Pen vYLrvpo by GreenSock (@GreenSock) on CodePen

 

However, as the demo shows, then you have a flash where it's hidden when the timeline starts. 

Link to comment
Share on other sites

Great suggestions,Zach. 
 

Im a little unclear on the details but maybe something like doing 

 

tl.pause(1)// pause at 1 second 

 

and then use a delayed call to play the timeline after some amount of time. 
 

on my phone so I can’t type it all out or do a demo. 
 

maybe it helps. 
 

 

  • Like 2
Link to comment
Share on other sites

Thanks for pointing me in the right direction. I think I have it working now:

 

See the Pen WNryPXy by jamesdutt (@jamesdutt) on CodePen

 

To the idea of adding a delayedCall, I added the following:

 

In .fromTo(".imgdemo") I changed scale from 0 to 1 and in  .from(".imgdemo") I deleted opacity: 0.

 

So now the image just sits there for 2 seconds, then begins its animation.


    

Link to comment
Share on other sites

26 minutes ago, OSUblake said:

What did you try

I replaced .from(".imgdemo") to .to(".imgdemo").  That does make the image fade out as it zooms out, then it appears again and zooms out to full opacity. Obviously I don't understand what you were suggesting.

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.
×
×
  • Create New...