Amanda

I think I need to rethink how I'm doing this a little bit, what you are saying makes a lot of sense. Thank you for your input. I'll post my new code when I'm done working on it.

Hello GSAP! I am working on a function, which is going to trigger timelines to tween to label (which are created within the function) when the relevant div is in view. (The ultimate goal is for there to be an infinite number of divs with class .doubleSlide, and the client will be adding the content). The first trigger works just as I expect timelineID.tweenTo('end' + i); HOWEVER, the tween back to the beginning is not working timelineID.tweenTo('start' + i); I have the triggers logging in the console, to make sure that the calculation of when the divs are in the viewport are correct, and, that is all functioning as expected. I suspect this is due to generating new timelines as part of an anonymous function, but it's confusing me why it works as you scroll into view, and not out of view. I appreciate any insights. Thanks! Amanda

THANK YOU SO MUCH!! This is what was needed. I couldn't quite see it.

Hello, I'm working on a gsap image slider to specifically meet my needs. I've got it all working as hoped/expected EXCEPT for one thing. The following (line 73) TweenMax.to(slider, 0.25, {x: -tweenD + '%'}); is intended to tween the slider to the relevant slide after clicking the related nav button. Unfortunately it works the first time you click a nav button, but on no subsequent clicks. What is working, is the changing of the 'current' class, which is within the same click function, so it has added to my confusion. Thanks!

Quick question: What is the correct syntax to seek or tweenTo next label in the timeline ? Depending on where the timeline is at that point? Thanks!

Thank you for all the info. I'm certain I'll be using :isActive for a lot of things. I ended up solving this issue by temporarily disabling the mouse wheel and then enabling it again onComplete. Like this: function disable() { document.removeEventListener('mousewheel', Go); document.removeEventListener('DOMMouseScroll', Go); } function enable() { document.addEventListener('mousewheel', Go); document.addEventListener('DOMMouseScroll', Go); }

Sorry, I wasn't clear. Once I've made the tween a variable, how to do I make it actually tween? Something like this? tween.play(); And on a side note, does :isActive also work for timelines??

Hi, thanks for your responses. I'm a little confused about how to use :isActive. It seems like it could be really useful in many situations. If I make a tween a variable, for example: var tween = TweenLite.to($row, 2, { y: '-300%', x: '-0%', onComplete:function(){ tl1.seek('slide5'); enable(); } }); How do I then call it on click? $('#button').click(function(){ call the tween// }); Thanks!

Hi, I have a bit of a unique issue that I'm having trouble solving. The site I am working on is kind of like a big page, where the user mouses around and it explores the page. I got that working (the codepen example is severely simplified). There is also a second functionality - a traditional navigation menu that when the user uses it, they tween directly to the section of the site. I have this working as hoped as well, and the user can mix up using the menu and mousing around. It comes apart in the following situation. If the user chooses to navigate with the menu and then choose a menu item, and they activate their mouse while it's still tweening, it gets very confused and jumps around. I came up with what I thought was a clever idea (turns out it doesn't work ), which was have the tweens be of #sliding .row and on opening the menu, remove that outer div. Even though it does remove the div, the timeline still moves to the next label on the mouse events. Hhhm. I'm wondering if there's any way to disable a timeline temporarily. I tried.killTweensOf, but that doesn't really work, because what I want to do is temporarily disable the timeline so it doesn't respond to the mouse event. Thank you!

Thank you, this is pointing me in the right direction for what I'm working on.

Quick question - if it possible to add sound effects to a GSAP timeline?

Hi, I have a pageless site that I'm working on, that has a slightly unusual navigation/ flow. I've got it working almost as it's supposed to. There's two main ways for a visitor to navigate the site. Note: the pages/sections are not presented in a linear fashion. 1. By scrolling they will move on to the next "page" or section. 2. Through the navigation menu they will go directly to the section The issue I am having is can't quite figure out how to make the whole thing loop continuously. When they get to page 9 and they continue to mouse, I'm trying to get it so they just go straight back to page 1, and if they mouse up from page 1 it will take them to slide 9 Any guidance is much appreciated!

Thanks, will take a look!

Quick question - I'm trying to figure out how to jump ahead in a timeline, just as a temporary measure for working and testing purposes. I'm trying to use seek.();, but it doesn't seem to be working. thanks!

Thanks very much, this led me in the right direction. I actually had to keep the elements as SVG, this is just a quick mock of my issue, it's actually an elaborate svg animation (client stuff that I can't make public). But I found the solution by TweenMax set in the parent element, the div wrapping the whole thing. And it works. I really appreciate the quick response. tl1.set('#animation',{width:'800px'}, 'move');

Hi, I'm trying to figure out how to make sure an element does not go below a certain pixel width either on browser resize or due to the animation. What I'm hoping for is at the end of the timeline, when the "logo" is up in the top left-hand corner, it doesn't go beneath, say, 200pixels wide. I have entered this through jQuery as such $('#logo').css({ 'min-width':'200px' }); And when I check through dev tools, I see it there as an inline element, but it is not effecting the width when I resize or check on a small browser. Any guidance would be appreciated!

Thank you so much! This is exactly what I meant.

Hi, I've created a timeline and tweento buttons that are working as I have hoped. What I also need to happen isa scroll to trigger the same as the click function. For example the following tweens to the label slide2, I'd like an initial scroll down to also tween to that label. $("#two2").click(function(){ tl1.tweenTo('slide2'); }); Any pointers much appreciated. Thanks!

Thank you!

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.

Also, another quick question, I'm seeing where I can specify the time length of the delay. I tried putting a timing function in tl1.tweenTo(nextLabel, {onComplete:wait}); and it didn't seem to work.

That method works nicely, but is there a way to do an "on complete" that has it resume play after?

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.

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

Thanks I had too much code in the button click. I wasn't totally sure how to write it myself, and I had copied someone else's similar code. I've updated the code in the CodePen demo if anyone else is interested.