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

Coming from a flash background with doing a lot of flash banners Blur was always a very good friend of mine. I did most of my stuff on the timeline and defining blurX or blurY for my movieclip took only seconds and looked kick-ass. However when it comes to JS/CSS/ in generel im struggling to find something that can mimic this the same way. I've been looking a bit on boxShadow which surely seems to be something I could try and play with. Would boxShadow be the way to go or are there other tools I could look at that would give me a quality'wise good result for doing directional/motion blur? Do anyone know if Greensock plan on revolutionizing us with some cool JS motion blur plugin?

Hi Carl - never got back to you on this one. Thanks for contributing with your throughout description of the "issue", it makes sence to me and your "fix" got my timeline going as intended now - i'd probably never figured that out if you hadn't come a long Again thanks - you're doing some overwhelming quick support here! A good weekend to you sir!

Hey all, I'm currently playing with the timeline and setting up a sequence of animations. So far i've used tl.to in my sequencing and all went good. I then wanted to implement .fromTo however that seemed to mess up my timeline. My objective is fairly simple, summarized in the following steps. 1. I do some initial CSS tweening 2. I fade up some text 3. I tween my div to the outer right 4. I change up some text 5. ISSUE: I now want to re-position my div to the outer left and tween it into center again. Ive set up an illustrative codepen example here: http://codepen.io/mrsgs/pen/IeLrF Note: uncomment line 15 to see the issue apply

Hi rhernando, Thank you so much for the quick reply! It works perfectly now And also thanks about the engine update note. Would you mind explaining how the infinite scroll works? Is it something like: - Background moves from default.x+y to tweenx+y - Background automatially resets back to default.x+y and repeats the tween ? Not that it matters so much in this simple case, since it will barely be noticeable, but assuming my tween makes the background end in a position where the dots doesnt align 1:1 with the dots from the first start frame, then when the tween ends / resets you would basically be able to see an "out-of-sync" "shake/move" going back to the first default frame? If im assuming correct on this, im wondering how this could be adressed,- if even possible?

Hey all, I currently have a header with some repeating background pattern. What im looking to do is make this repeating background pattern move towards right and bottom from a point of position: absolute; - in the same speed and in an infinite loop. You can see a dummy here - hope it somewhat illustrates what im looking to do: http://codepen.io/anon/pen/oapnB Initially my idea was to have it move in one direction first for like 10secs and then change to another direction - as the codepen illustrates. However lets just keep it simple: - Would anyone be able to tell me if im able to move my background pattern infinite in one direction? Right now I offset the background outside of the screen, so that I have some extra background to actually move around without it ending - im not sure how to adress that for an infinite solution - perhaps some resetting needs to be done? But in that case im not even sure how to do that so it looks in sync.

Hey rhernando, Thanks so much for your response. My sun rays are currently an image sitting in a div. I was thinking to split up the image to 3 separate images and place them each in a div of their own - with the rays split among and then run the clipping property on each image. I was thinking to create the ray lines with pure css and html and then change the reg point to the bottom center of the ray and then rotate / scale it up - but curious to how this could be achieved with an .png image sitting in a div (if possible at all?)

Imagine having a set of light rays surrounding a circle - just like the sun. What I want to do is reveil the rays, so the appear to be "rising" from the sun. In Flash I would be able to create a nice effect for this by doing something like the following steps: - Divide the rays into x amount of groups (symbols) - Create a circle mask that will scale up "grow" to reveil the rays - Run the circle mask with 0.3 delay on each of the x amount of groups I figured that I could emulate something similar with the clipping mask, but that only works with rectangles?