celli last won the day on January 3 2016
celli had the most liked content!
Posted August 31
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
accordianClkTl.reversed() ? accordianClkTl.play() : accordianClkTl.reverse();
This way didn't work
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.
See the Pen poyrRZe by celli (@celli) on CodePen
Posted August 26
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.
Posted August 25
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
See the Pen abNJyaB by celli (@celli) on CodePen
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.
Posted August 7
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).
Posted August 6
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.
okay, I've updated my codePen, I have this working to play my timeline when I scroll up and down, this is awesome -- But I am still not seeing how I can get the state when I reach the top (I would be animating some other things when this happens). I added a temporary console.log to if (position === 0) but it doesn't seem to register.
I think if I can get that, then I would need to figure out how to play to a label and pause, then if I hit the top I can resume my timeline.
okay, I will create my timeline and try and get this. One thing though, on my original CodePen I actually have 3 stages, one where I scroll down, one where I scroll up (which is an in-between phase) and another when I actually reach the top. How can I accomplish that with only play() and reverse() of my timeline ?
I am able to use scrollTrigger like you suggested using .scroll() value, which is great! But I am having trouble even starting to understand where I can use this to see if I am scrolling up or down. It works now in a basic form (I updated my pen) , but its not seeing my var: lastScrollTop -- can you show me what you mean or how to implement that into my variable lastScrollTop ?
Okay, I will create the timelines and play and reverse them for sure.
I really would like to do this with scrollTrigger, but I can't see how to tell if I am scrolling Down or Up (scrollDirection) or if I have reached the top with scrollTrigger. How can I achieve this ?
Hi, I have included a CodePen to illustrate my issue.
When I am scrolling downward, I have some GSAP code that transforms my elements. Wen I am scrolling upward, the GSAP code transforms them in a different way, and when we reach the top of the window the code transforms the elements in another way.
The issue that I am experiencing is that, if I am scrolling fast, or if I touch the bottom and then start to scroll up and down, it *sometimes* causes the elements to jitter. When I inspect the code, it looks like my inline styles that are created by the tweens are fluctuating up and down rapidly, causing the elements to jitter repeatedly. I can usually *but not always* stop it from happening, when I re-scroll in either direction. But it is unpredictable. I am using 'overwrite: true' in most instances to try and compensate for this, in-case it is still reading the values from a previous tween, but it still occurs. Is there something that I can do to completely avoid these values from fluctuating rapidly up and down, and causing my elements to jitter ?
Note: I tried using scrollTrigger to do the whole thing and recognize when I am scrolling up or down, but I was unable to figure out a way to handle that.
See the Pen WNwbrpL by celli (@celli) on CodePen
Posted August 2
Thank You PointC!
I added maskUnits="userSpaceOnUse" and it works now. Do I need that for every mask created?
I read your article on motionTricks as well (very nice, thank you!!), In your article it says to wrap my masks in <defs></defs> tags, should I do this with all SVG masks ?
Hi, I understand from the SVG Gotchas post about animating dashed-stroked with the DrawSVG plugin, and from studying PointC's demo here
See the Pen zrQLvO by PointC (@PointC) on CodePen
I setup my path with a duplicate path that I can use as a mask to animate my dashed path, which seems straightforward and simple, but I still can't seem to get it to work and mask-in my dashed line. Does anyone know what I am doing wrong in my reduced codePen?
See the Pen oNbKrzL by celli (@celli) on CodePen
perfect explanation, thanks!
Posted July 30
right, of course! not sure why I thought we could only go to 100%. That is great!
It still seems to work with immediateRender:false; I updated my codePen to reflect this, and still seems to work ...
yep, that works!
Can I get the scrollTrigger to start below the bottom of the viewport? How can I set that up? Actually I was trying to do that (in some cases) because some elements that reside close to the top of the page (like this one) - I was hoping to limit the amount of scrolling before getting to the first element that animates with scroll. This was the reason I wanted to disable it on smaller monitors, since the element would appear too low in the viewport.
When using matchMedia with scrollTrigger, it works well when I start my page at < 800px and then when resizing my browser window to > 800px (just as an example).
But it seems that when I resize back to less than 800px, the position of my element does not return to it's original y value (it remains far down the page). I am guessing I need to add something else to completely kill the scrollTrigger values and reset my element to it's original css positioning. What is the best way to accomplish this ? My CodePen example should illustrate what I mean.
See the Pen PoZrxey by celli (@celli) on CodePen
Posted July 1
okay, that makes sense. I'll try and figure out where to revert on resize.