mrsam

Cheers @Trapti + @Carl . Seems I need to dive deeper into how to effectively use these tools Trapti > Is there some smart way for me "sync" moving the circle with the draw effect? I changed your drawSVG to ".to" which now makes it go left to right. However the Draw is much faster / outruns the circle. Updated codepen here: https://codepen.io/mrsgs/pen/dyKJebo

I'm trying to have a circle follow a SVG path with MotionPath and ScrollTrigger. This is working fine. At the same time of this happening, I want to reveal the path "with the circle", so drawSVG into the mix of ScrollTrigger + MotionPath. Do I need multiple ScrollTrigger events or should I be able to handle it all with just one? And somehow split up the drawSVG animation in a timeline of it's own? Or how would could I make it work?

Doh! You're totally correct and your updated example is perfect! Cheers Jack!

Im current pinning a container on top of the viewport. This container contains a lot of text (exceeding) the viewport height. What I want to do is being able to scroll the content to the end while it's pinned. But for some reason content (visible on the right column in the codePen) isn't scrolling - any suggestions on achieving this? let tl = gsap.timeline({ scrollTrigger: { trigger: ".list", scrub: 1, end: "100%", markers: true, pin: true, toggleClass: "is-sticky" } });

Sorry Zach, perhaps im misunderstanding what you're saying. If I scroll super fast past the section (like you mention): and reach the end of the section scroll - then callback onLeave is triggered, right? So regardless of how fast I scroll past that section onLeave is always triggered. So when it is triggered I know my section scrub is done. When my section scroll is done - I want to restart/ or make sure, when you scroll up again then it will be 1,2,3,4,5. Here a "conflict" will happen yes,- since we need to swap/reverse/prepare current visible scrolled 1,2,3,4,5 - into an -> in-visble 1,2,3,45 - that would result in an "on/off flicker" of the text ... Knowing there's a conflict that given moment, I just hide (fade out) the text container when onLeave is triggered -> do the flicker "conflict" swap -> and when scroll back will happen = onEnterBack - noone will ever know there was a conflict Hiding the text container when the swaps happen, is what I am doing in my CodePen already. But tampering with the scrollTrigger/timeline, reversing/restarting as mentioned, this is what im unsure about how to handle

Good thoughtfull catches It could be handled somewhat just like in my CodePen: -> onLeave (top to bot - scroll done) = I hide the container -> and then - Trigger (and prepare) whatever reverse (or similar) swaps needed to play 1,2,3,4,5,6 ->> onEnterBack (bot to top scroll "restart") = I un-hide the container -> Timeline starts playing again. ->>> onLeaveBack (bot to top - scroll done) = I hide the container -> Revert back to initial state ->>>> onEnter - all is normal again

Hi Zach! I just figured the callback functions could be leveraged to somehow trigger and reverse some things. But what and how i've not managed to figure out yet In your "cleaned" version, when you scroll back it does 6,5,4,3,2,1 - whereas I want it to do 1,2,3,4,5,6 again (as it did onEnter)

Yes spot on! What you propose, would I be able to "tie" that to section scrub as it currently works? I have a hard time figuring out how to do that

I have list of text that I fade up from : 0 > 1 - a long the span of my scrub scroll. This is how it works pr. initial setup: (see codepen below) 1. onEnter: (scrolling: top to bottom) text 1, text 2, text 3, text 4, text 5 (fade up) 2. onEnterBack: (scrolling: bottom to top) text 5, text 4, text 3, text 2, text 1 (fade down) My "issues" is that: - when I hit onEnterBack (or perhaps trigger the following on: onLeave), I basically want to restart the animation, so it will be like the flow in point 1 again (onEnter) (= I want to give the same text effect experience as coming from top) - and when I then hit onLeaveBack,- again - then reverse back to "initial" (normal point 1) state Is that possible somehow?

Ok, just seemed that YepNope got deprecated for a reason - that being, other perhaps more viable options are available today, rather than having to load yet another library to check for this

Sorry for reviving this old topic, but question anno 2018: How would you go about loading a local fallback today?

Im currently trying to add tweens created in a .each loop to a paused timeline so that I can initiate that timeline whenever I want. I succeed in adding the tweens to the timeline, but it doesnt seem that the timeline adhere possible delays from the tweens - when playing the timeline it goes veryyyyyyyyyyyyyyy slow. To see my wished tweening without the timeline applied you can go to: http://jsfiddle.net/b3cx28pq/1/ To see my slow timeline go here: http://jsfiddle.net/cgcpwf8z/ Any tips on how I can get the timeline approach working in the pace I want and from adding the tweens within the .each loop? Some code (from the fiddle) attempting with the timeline add: //Timeline var animBlock = new TimelineMax({paused: true}); blockContainer.each(function(index){ var that = $(this); var thisBlock = that.find(".block-item"); var thisBlockPullLeft = thisBlock.hasClass("pull-left"); var thisH3 = $(this).find("h3"); var thisParagraf = that.find("p"); if(thisBlockPullLeft) { animBlock.add(TweenMax.from(thisH3, 0.8, { delay: delayDurationHello, autoAlpha: 0, right:-100, ease:Power2.easeOut, paused: false })); } else { animBlock.add(TweenMax.from(thisH3, 0.8, { delay: delayDurationHello, autoAlpha: 0, left:-100, ease:Power2.easeOut, paused: false })); } animBlock.add(TweenMax.from(thisParagraf, 0.8, { delay: delayDurationParagraf, autoAlpha: 0, top:-25, ease:Power2.easeOut })); delayDurationHello += 0.4; delayDurationParagraf += 0.6; })

Jonathan > Force3D to the rescue! I see significant approved animation now on the up & down animation - for some reason I especially noticed the sluggish animation in chrome if I took and re-sized my browser back and forward in width, then the up & down animation would "struggle". However doing that after force3D - it's still just smooth. So far i've only forced force3D to the elements that I have more animation on - but out of curiosty - is there a way to force force3D: true pr. default so it enables on all tweens?

Hey Jonathan - thanks a lot for contributing! Truly appreciated! There we're some wrong function call in your codepen, so I took you yoyo example, and removed un-necessary functions, which can be seen here: http://codepen.io/mrsgs/pen/hlBoc Also added easeInOut for smoother up/down movement. Taking one function out and re-using the same tween of the element to move up and down would surely seem to improve performance! I'll test it out in my application and see if things improves with the yoyo and repeat -1. I guess the up & down tweening can't even get shorter than that!

Im trying to achieve a smooth repetitive up and down "floating" effect on x amount of elements - each element with it's own id. After a little while of "floating" the up and down tweening seems to get sluggish. (my real test uses 5 x 100kb images that has been preloaded before tweening) Im using one function to define the up tweening and another to define the down tweening and then throw each element back and forth these two functions. Any suggestion on how I can achieve the same effect more efficient and perhaps even in some smarter way without the two functions are very welcome! My bet is there some "bottleneck" there and that I can perhaps do some simple re-usable timeline instead? Follow the Codepen to see the concept of it