jamesdutt Posted July 11, 2020 Share Posted July 11, 2020 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 More sharing options...
ZachSaucier Posted July 11, 2020 Share Posted July 11, 2020 Hey James and welcome. I'm sure @Carl will be glad to see more people using his tutorials addPause literally adds a .pause() to a specific point of a timeline. What you're looking for is the delay property for timelines: See the Pen eYJKQov?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
jamesdutt Posted July 11, 2020 Author Share Posted July 11, 2020 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 More sharing options...
ZachSaucier Posted July 11, 2020 Share Posted July 11, 2020 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 More sharing options...
Carl Posted July 11, 2020 Share Posted July 11, 2020 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. 2 Link to comment Share on other sites More sharing options...
jamesdutt Posted July 11, 2020 Author Share Posted July 11, 2020 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 More sharing options...
jamesdutt Posted July 12, 2020 Author Share Posted July 12, 2020 Sorry, I didn't notice that deleting opacity: 0 eliminates the fade out at the end of the animation. So I guess I am back to not having the end fadeout or having the flash of content at the beginning. Link to comment Share on other sites More sharing options...
OSUblake Posted July 12, 2020 Share Posted July 12, 2020 42 minutes ago, jamesdutt said: Sorry, I didn't notice that deleting opacity: 0 eliminates the fade out at the end of the animation. Animate to an opacity of 0, not from. 1 Link to comment Share on other sites More sharing options...
jamesdutt Posted July 12, 2020 Author Share Posted July 12, 2020 8 hours ago, OSUblake said: Animate to an opacity of 0, not from. I can't get that approach to work. Link to comment Share on other sites More sharing options...
OSUblake Posted July 12, 2020 Share Posted July 12, 2020 What did you try Link to comment Share on other sites More sharing options...
jamesdutt Posted July 12, 2020 Author Share Posted July 12, 2020 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 More sharing options...
OSUblake Posted July 12, 2020 Share Posted July 12, 2020 I meant show us what you tried in a demo. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now