celli

I picked up the GSAP demo using the modifiers plugin, and I wanted to replace the number of the total width of the boxes in the carousel, with a variable called 'boxesLength' since I won't know how many boxes there will be. The number of boxes will change, so I wouldn't want to use a static number. Is it possible to use a variable like I have in my codePen ?

It looks like it might be an issue with Chrome on the slightly older Macs. Definitely not a GSAP issue, but maybe there is something to add to optimize the performance in Chrome that someone knows about. I added more shapes and it is still very smooth on Safari and iOS, but Chrome on the same machines (2 late 2017 Macs) shows the choppy issue, probably because there are so many shapes masking in. I tried one css addition seems to help a small amount in Chrome - svg {shape-rendering: optimizeSpeed;}

@PointC, thanks for taking a look! There must be something wrong with my setup here, I will troubleshoot that. I've created with the exact same technique in the past and no issues in the past either, I just thought maybe I was missing something.

@OSUblake, Okay that makes sense. Thanks for looking into it with me.

Thanks for looking into it. I will take it apart and try and locate what's making it slow. In the meantime I have one more question: If I wanted to repeat this effect 3x, each with a different color, while staggering each instance (so that I can see the 3 colors run at the same time, and about .05 seconds apart from each other) Is there a better way than duplicating my SVG 3x and creating 3 separate timelines while grouping them into a master timeline? I don't mind the multiple GSAP timelines, but repeating my SVG shapes and Masks 3x in my HTML might get heavy and seems like a lot. Do you think there is a way to avoid that?

@OSUblake, The forked codePen is also running very choppy for me but PointC's codePen runs smooth. I am running Chrome so based on your response of it running fine, I tried in Safari and it does seem to run smoother, but very slow. I restarted Chrome and my computer, but the original seems to still run very choppy.

I have a codePen setup to run a timeline that will mask in each letter by using drawSVG and animating the strokes of my paths that cover each letter. When I run the timeline with each of the stroked paths are not set-up as masks in my HTML it runs as expected, very fluid and smooth. But when I change the stroked paths to masks (setup within my SVG to comment and uncomment out) the animation runs very choppy. I tried limiting it down to two letters, and optimized each SVG curve, but it still makes the entire animation run very slow. I must have something incorrectly setup because I've used this technique many times in the past—but I can't seem to uncover what's wrong this time. I commented out the stroked paths as MASKs in my SVG, so to test the performance you can uncomment that part and comment out the stroked paths in the codePen. Thanks in advance for any insights.

Thank you Carl. Great advice from a great teacher.

yes, I see what you mean. Okay, I will re-think this! Thanks.

I am working with one of Carl's demos, and I am trying to figure out how to make my slider go to the appropriate spot in my timeline, when I click one of the slide indicators, which are the red circles in my codePen (the 3rd dot when clicked, should go to the 3rd slide, and so on). I added a dynamic data-id to each of the circle navigation items and the same to each of the slide elements—now I am trying to see how I can sync up the data-ids so that the correlating slides (or the progress of my timeline) matches up with the correlating circle navigation items, when I click one of the red circles. I won't know how many slides there will be in the end so, I can't assume there will always be 5 slides like in my demo. My CodePen shows how it's functioning now, but the red circle navigation indicators only go to the next slide, since that's how I have it setup. Is there a way to accomplish the matching up of each of the .navButton's data-id's to the corresponding timeline progress ? I was thinking something like this: tl.progress(dataId*10).play();

Thanks PointC! Yea, I see that does work. I just need to pause my master timeline first. Thanks!

Can I put an ease on a master timeline? I would like to add an ease to the whole timeline, in addition to the eases that I've added to each tween in the timeline, for more control over my easing / timing overall. In my codePen I've added the ease to the master Timeline, but it doesn't take effect—and I wonder if there is a way to do it now with the latest GSAP version.

great tips, thanks guys!

ahh yes, makes perfect sense, thanks Jack! I needed to change my click function to use an eventListener to actually make that work container.addEventListener("click", function(){ accordianClkTl.reversed() ? accordianClkTl.play() : accordianClkTl.reverse(); }); This way didn't work container.click(function() { accordianClkTl.reversed() ? accordianClkTl.play() : accordianClkTl.reverse(); });

Hi, I recently had another post and learned I can use this powerful tool, so I am using the GSAP utils.toArray in a new pen. I want to use it to effect only the element that I am clicking on. I am new to using this GSAP utility, so I must be doing something incorrectly because all of my elements are effected, instead of the one that I am clicking on only. Hoping someone can shed light on what I am missing.

That's great PointC, I appreciate that! I also like how you made a variable for the timeline defaults, I never thought of doing that. Thanks for the tips.

Thanks Zach. I didn't realize that about the forked pens. I will do that moving forward. I did wind up creating two tweens so they wouldn't conflict. I also added a zero to my play reference like this, so that they would re-play each time from the 0 timeline position on mouseover. I think this is the best way to handle that. If there is a better way, just let me know. tl1.play(0)

Thanks Zach, I tried both ways. If I hover over only one and then hover directly out of that one it seems to work. If I hover more quickly, and hover from element-to-element, the elements flicker and seem to not reverse the timeline properly inconsistently. My older code below, which is commented-out, it is working smoothly. If you switch the comment blocks, you can see it working smoothly when I am not using the single GSAP timeline. But, I want to do it the right way with—one GSAP timeline, but I am doing something wrong in order to effectively do this. Do you see what I'm doing wrong in the uncommented out version in my codePen?

I think it will not work, because I want to put that into utils.toArray. I tried two ways to reference the elements in my codePen https://codepen.io/celli/pen/abNJyaB

wow Zach, this is amazing. I have made the revisions on my original codePen and got it to work pretty easily! That's really great. One additional question, how would I handle something like this in that loop—where I want to effect all elements, except the one I am moused-over. let notElement = $('.container').not(this);

Hi, I have mouseover and mouseleave events that work to control specific instances of elements that are inside of the container. I can easily create multiple GSAP instances within each mouseover and mouseleave function to control my elements, but I want to create a paused timeline outside of my mouse functions, and control the play() and reverse() of the timeline instead. The issue I am experiencing is that my timeline would be referencing every instance of a classname if I do it this way, while I really only want to reference the specific class that is inside of the element that I am mousing-over. How can I reference the mouseover event's element specifically, and also create the GSAP timeline outside of my mouse events? There has got to be something simple that I am missing.

Thanks so much Zach. I have it all working now through much trial and error! It was definitely the marginTop that was causing my main issues, and it is much better organized and using scrollTrigger, thanks to your guidance, so I really appreciate all of this. There is only thing is that it feels like the tween to the '.content' in my timeline is scrubbing even though I have scrub:false specified. This only happens only if you scroll very slow from the very top of the window, downward. I can actually scroll/scrub and effect the position of my .content div (probably not noticeable to most).

correction: I see the issue. Is is the marginTop and the height animating, that is causing this issue. I am in the process of replacing the marginTop with a y transform, however this doesn't keep the elements below it in the flow, so my elements below the one with the y-transform will not also shift down, like when using margin -- do you suggest another property to use in place of margin with GSAP ?

Hi Zach, I created multiple timelines in separate functions, because I actually need other things to happen when the scrolling reaches the top position and I don't think a label will work. But I think the main issue still remains, when I scroll all the way to the bottom quickly and the scrolling over scrolls or creates a negative scroll, similar to what happens on mobile, I get this constant jitter--so I am wondering if there is also a fail safe that I can put in to completely stop the calculations after it reaches the end of the timeline?

ahh, right, I forgot about that. Thank You! Okay this is all working. I will work on pausing the timeline at a specific label, then resuming if I hit the top. Thanks for sticking with me here.