Jump to content
Search Community

Change to new timeline onclick

Amanda test
Moderator Tag

Go to solution Solved by Carl,

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, 

 

I've posted this example before with a slightly different issue. 

 

I'm still trying to get it to function as hoped. Basically I have slides moving on a timeline. When you click the buttons it goes to a particular part of the timeline. Unfortunately it does all the pauses in the timeline. So what I'm hoping is for it to play another timeline on click, so it moves quickly to the desired place in the timeline. 

 

I have the three top buttons (named one, two, three) working. But they take the timeline through all the pauses on click. I'm hoping to play tl2 on click or come up with a decent working solution. I've added another button (named Quick1) which I'm trying to add that functionality to. 

 

Any guidance would be much appreciated! Thanks 

See the Pen BjzBav by ald603 (@ald603) on CodePen

Link to comment
Share on other sites

As mentioned in the other post, the best course of action is to not have any pauses in the timeline. 

Hard-coding new timelines for each transition from any slide to any other slide is going to get very messy very quickly. 

Please load this demo: http://codepen.io/GreenSock/pen/qbqPzX?editors=001

  1. watch it cycle through a few times.
  2. hit one of the buttons on the left to see it quickly tween to the proper slide
  3. hit the "resume autoPlay" button to watch the slides advance on their own with a 1.5 interval again.

This demo uses the techniques discussed here: http://greensock.com/forums/topic/13421-tween-to-buttons/?p=56014

Link to comment
Share on other sites

The problem is, that is what is required and I don't have any say in the matter. Greensock is working really well for this functionality of the split images joining together. I just need to be able to jump quickly to each slide, or at least fake the effect. 

Link to comment
Share on other sites

I tried putting a timing function in   tl1.tweenTo(nextLabel, {onComplete:wait}); and it didn't seem to work. 

 

 

hmm, that's exactly what I did and it appears to work here: http://codepen.io/GreenSock/pen/qbqPzX?editors=001

for the record, I don't think it's a good idea to auto-advance to new content once the user has clicked a button, but I guess its out of your hands.

Link to comment
Share on other sites

 I don't think it's a good idea to auto-advance to new content once the user has clicked a button

That's funny as I was following along on this thread and thinking the very same thing. User attention spans are so short anymore they seem like hummingbirds amped up on Mt. Dew. :-P

 

We actually don't build anything with auto advance on anything anymore. I put buttons and draggers out there so my users can feel like they're in control. With the proliferation of smart devices and apps, most studies you'll find will say that people aren't going to wait for any autoplay on anything - they want to push a button or drag something immediately or they get bored really quickly.

 

I'm just finishing a new website right now with a split screen slider almost exactly like the one being worked on here, but I just placed all the panels off stage with absolute positioning and the user can call any of 4 sections so they can go directly to the new panel without sitting through any wait time, but still get the opposite sliding motion. It's pretty easy if you aren't building it as one giant stack trying to slide through all the panels to get to one on the other end. 

 

My two cents worth: go whoop on your client a bit.  :lol:

 

I'm kidding of course, but it is our job as designers and developers to guide our clients to better decisions. Ultimately though, they do get the final say and I understand those situations all too well.

 

Good luck. :)

  • Like 3
Link to comment
Share on other sites

Thank you everyone, this is all very helpful. Can someone recommend the best course that I can do to learn Greensock properly?? I want to be a little more thorough and systematic in my learning. I've only been using this library for a few months and I'm excited about all the possibilities. 

Link to comment
Share on other sites

  • Solution

For the most comprehensive overview of the platform, I strongly recommend our GSAP course book (disclaimer: I wrote it). It contains all the lessons we use in our live training with detailed instructions. It was designed to walk you through the platform from a simple tween to nested timelines. Along the way you'll learn about callbacks, eases, plugins, special properties and a whole bunch more. 

 

If you feel you have a firm grasp of all the basics, I would then recommend Petr's GreenSock Workshop. He does an amazing job of presenting the projects and they are very impressive. I would also suggest poking around his blog as he has lots of great free tutorials as well: https://ihatetomatoes.net/blog/

  • Like 2
Link to comment
Share on other sites

I was going to recommend Carl's book and Petr's training as well, but Carl is too fast and beat me to it. :)

 

In addition to those things, I think a lot of people forget about the blog right here on the GreenSock site. Lots of great videos and quick tips can be found there. 

 

I'd also recommend following a few people on CodePen:

 

Diaco writes some really tight code: 

http://codepen.io/MAW/

 

Blake usually approaches things from a different perspective:

http://codepen.io/osublake/

 

The GreenSock pens are always great:

http://codepen.io/GreenSock/

 

The beauty of CodePens is you can fork them and dissect for a better understanding.

 

Finally, when all else fails, you can read the documentation.  :-P Actually, the documentation here on the site is so well written I find most of my answers in there. Just make it a habit to read up on one part of TweenMax or a plugin each and every day and then put your new knowledge into practice with a CodePen. Before you know it, you'll start understanding new approaches to everything.

 

Good luck and happy tweening. :)

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