Jump to content
Search Community

Controlling and manipulating image sequences

yihaod 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

Hi all,

 

I'm new to web development and Javascript, so please forgive if I'm asking silly questions! Let me describe what I am trying to achieve.

 

1) I'm planning to create an autoplaying image sequence, that is also "scrub-able". The scrubbing moves the image sequence forward or backward the frames. I would also want to set up some controls akin to carousel pagination buttons, whereby clicking on these dots would play the sequence to a specific frame in the img sequence. 

 

2) During the scrubbing, should the user release the mouse, the image sequence would play to the nearest image frame that is assigned to a pagination button. 

 

3) Overlaying clickable hotspots that appear only on the frames assigned to the pagination buttons. 

 

I think the easiest thing for me is number 3, as there's a demo of something on GSAP page. For the rest of it, I tried looking at other threads but can't make much sense of them :( 

 

Could someone point me to some starting ideas?

 

thanks in advance

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Great idea to start with a project like this, however I would strongly recommend you take some baby steps first. The features you want are fairly ambitious for someone starting out. Unfortunately we can't walk you through each aspect of what you want to do. Some of those things are harder than others.

 

Take a look at these demos by Diaco

 

http://codepen.io/MAW/pen/XmozON

http://codepen.io/MAW/pen/yYradO

 

You don't need to build the same animation effects but you can learn a lot by studying how the timelines are constructed and how the code on the various buttons work.

 

Its probably the most straight-forward approach there is and it offers a really solid foundation concerning the basic HTML and CSS.

  • Like 5
Link to comment
Share on other sites

Hi yihaod  :)

 

Welcome to the GreenSock forum.

 

I'll echo Carl's advice about Diaco's pens and  you'll find some more nice slider examples on CodePen.

 

As far as starting ideas - my best advice is: start simple. Forget about your images for the moment. Create a few plain colored divs and a few buttons and get the functionality to your liking. You can always move buttons, change backgrounds, add images etc... The point is not to get bogged down in styling everything right out of the gate. The best way to figure out the code is just start trying it. You'll most certainly have GSAP related questions as you get going and we're here to help you through that part of it.

 

If you haven't set up a CodePen account, I'd highly recommend it. It's extremely important that we see your code as you ask questions. Please check out this link for details about that:

 

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

 

You can also fork pens on CodePen and break them apart to see how they were created. That can be very educational.

 

Hopefully that helps a little bit. Please post any GreenSock related questions here as you get going. We will always do our best to help you.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

thanks Carl and PointC, for giving me some sense of context on the development endeavour I'm looking at haha

 

I'll study the examples, and keep you all posted on my progress. 

 

thanks once again!!

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