savvi

Sorry just logged in and saw this reply.. I scanned through the docs but missed it then went to google. Now I can see it in the docs clear as day!

haha brilliant!! I did have a google and it seemed something quite simple to implement so I did wonder! Thank you!

Would be great if we could theme scroll markers in some way? Give position left or right side of screen and maybe add a colour option? markers: {visible: true, label: "myTrigger", position: left, colour: red} This way it would be easier to distinguish between multiple scroll triggers.

HI guys I'm having similar problems... I'm using Webpack and if I do: import ScrollToPlugin from 'gsap/src/uncompressed/plugins/ScrollToPlugin' It finds the ScrollToPlugin ok but its then looking for TweenLite and is unable to find the file

thanks guys

Is it possible to play between two points on a timeline? I'm aware I can use seek to go to a specific point but what I'd like to do is stop as certain point. ie. something like: timeline.playBetween(0.3, 0.9) So my animation would start at 0.3 and end at 0.9 along the duration of the timeline. Is this possible?

Hi guys Thanks for your replies.. To be honest while not understanding the exact details of why its along the lines of what i figured was happening. I'd already solved the it by doing as you said and not putting the callback right at the end of the timeline. I posted really just to document it in case anyone else had a similar problem. But interesting read and to be honest I am constantly impressed at how reliable GSAP is.

Hi just spent a good few hours trying to work this out and not sure if its a bug or not but thought I would share on here. I'm using a various timeline tweens with .call() at the beginning and end of each timeline to show and hide an asset. These are used in conjunction with various other tweens in the timeline. i.e on a 6 second timeline.. .call(showHide, [], this, 0) .call(showHide, [], this, 6); These timelines are then chained together in one master timeline. What I noticed is that while moving forward through the timeline everything worked OK but going backwards the .call() that was at the end of the each individual timeline wouldn't fire. I solved this by just triggering the call 0.1 of a second before the end of a timeline. i.e again on a 6 second timeline.. .call(showHide, [], this, 0) .call(sshowHide, [], this, 5.9);

Yes that worked a treat!! Thanks again.

Well there you go.. Thanks Mr Jefferson I'll give that a bash!!

ok almost brilliant.. So my function is a within an object and if I make a call to this function outside of the timeline it works fine i.e.: this.tl = new TimelineMax({onUpdate:updateUI}); this.tl.add(showAnim1, 1.5) function showAnim1(){ parent.anim1.animateWidth(0,300); } but when I try and tidy it up and call it directly within the timeline as shown below: .call(parent.anim1.animateWidth, [0,300], this, 1.5) I get a "Uncaught Cannot tween a null target." Any idea why this would be?

Brilliant!!!

Hi.. Can someone tell me if its possible to pass a var to a function you call from a timeline? I've been using timelines to call functions.. i.e. this.tl.add(myFunction, 2) but I want to pass a var so I thought the following: this.tl.add.(myFunction("myvar"), 2) But this doenst work.. any suggestions? Thanks

Its ok.. I faked a click by calling startDrag after a screen resize this seems to sort everything out. So all good.

its a little complicated to produce a demo but essetially what happens after a resize is that the animation is all out of sync which kind of expect. I have no way of resetting the progress. If however you drag on the container a function is called on update and does the following ************************ var X = -this.x; if (X <0 ){ X = 0 } animation.tl.progress(X/data.w3); ************************* I thought I could trigger this function after resize but it only works if you physically drag on the container.

Once you have declared a draggable object is there away to delete it again? The reason I ask is that I have page that works really well controlling multiple tweens as you drag the container. The problem comes if the browser is resized and I get all sorts of odd results. if you hit refresh then it works fine. So my thinking is the easiest way to get around this would be to redelclare everything after a resize. I've done this for the timeline animations but i can't seem to find a way to get rid of the "draggable" once it has been set. There is a "disable" but what I would like to do is completely remove it.

ah ok that sounds good. The on progress wasn't that reliable. Giving that a go now. Thank you.

ok forget that.... but this on the update... if(data.tl.progress() > 0.2){ mytriggerfunction(); } sorted

Hi Again guys.. I've got my nested timelines running quite well and am using the scroll of the page and draggable to make them play. So my timeline is currently like this: data.tl.add( hideAssets(data.b0)) .add(showAssets(data.b1)) .add(hideAssets(data.b1)) .add(showAssets(data.b2)) .add(hideAssets(data.b2)) .add(showAssets(data.b3)) .add(hideAssets(data.b3)) .add(showAssets(data.b4)) .add(moveMan(data.man), 0); And it works lovely. But what I want to add to this is a function to trigger a repeating animation that plays indendantly of the timeline. i.e something along the lines of .add(mytriggerfunction(), 0.2) where myTriggerFunction() starts an animtion playing 20% into the tween. Any pointers on this? is it possible?

Thanks guys.. sorry for the delay. Your comments were very helpful.

Hi.. Am trying to create an animation that is essentially several time lines running concurrently. These are then controlled by a scroll or a slider. Is it best to nest these in one master timeline object or create multiple timelines that are controlled by the slider? Its dead easy to create multiple timelines but I wondered what the overheads of this would be and would it impact perfromance? If its best to nest the timelines some how can anyone point me to a tutorial on how to do this? Thanks

Sounds good. I'm trying to tie the draggable object into the track pad on apple mouse and scrollLeft is giving me jerky results so hoping this will sort it.

I'm trying to detect the x position of a dragable object using scrollLeft. using the onDrag:updateDrag I can detect a this.x and set a variable to use it outside of this function but what I can't do is detect the x position of an item that hasn't yet been dragged. I thought I could use the var drag = Draggable.get("#container"); and then use drag.x but this returns undefined? So I'm guessing I'm not using this correctly. Is there a way to return the x value before an element had been physically dragged?