Jump to content
Search Community

Animating a number of images using the pause() feature

HappyCoderInLondon test
Moderator Tag

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

Hello all

 

My first post.

Greatly enjoying getting to know GSAP.

 

I'm looking to set up an animation which will be paused at a number of points.

 

I have an image of an iMac and looking to slide up a number of screenshots of a website.

 

The first page slides up from the bottom of the screen, pauses for five seconds, and then slides up off the iMac screen.

As the page disappears, another page slides up, pauses, and then again it disappears up and off the screen.

This is repeated for about 10 screenshots.

 

I would then like the page to loop.

 

Can anyone point to me to where I can look for help on the net.

 

Hope this is all clear. I haven't found the documentation very clear. But this is probably due to my lack of experience.

 

Thanks in advance for your help.

 

S

Link to comment
Share on other sites

Hi HappyCoderInLondon :)

 

Welcome to the GreenSock forums. 

 

If I understand your question correctly, it sounds like an image slider with a .png or SVG of an iMac screen in front of it as a mask? Would this be full screen? Is it a fixed size or something that would scale? There would be a number of ways to make that happen. If you search sliders here on the forum you'll find a lot of topics. 

 

CodePen also has loads of examples to help you get started.

See the Pen by search (@search) on CodePen

 

The best way to get help is to put together a CodePen demo for us. It doesn't need to be the finished product. Just a few simple divs/images and what your desired outcome would be. Editing your live code allows us to give you the best assistance. Check out Carl's blog post about creating a CodePen.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Hopefully that info gets you started. Happy tweening and welcome aboard.

:)

  • Like 2
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...