OneManLaptop

Thanks very much, wasn't expecting a full rewrite, wow! Yeah, that's a slightly different way of thinking about it, I'll certainly pay close attention to your example! I'm trying to wean myself away from jQuery and switch to arrow functions at the moment. I always come unstuck when referencing "this" and passing on data attribute values though, so end up retreating to the safety of that dollar sign. This is a great example to learn from though, thanks for sticking with it bud, really appreciate it.

Right, okay! So I did put a temp fix in place which did just turn off the event listeners: $(".item").off('mouseenter mouseleave'); But I thought better of it in the end, as: 1: I'm loading other pages in via Ajax and for performance, it's always just best practice to kill timelines which reference content that no longer exists. 2: I assumed that turning the listener off wouldn't disassociate the tl from the boxes themselves, so would create problems when I tried to apply another timeline to them. Anyway, so after step 3, I would use the each method again, to apply a new hover timeline to them, this time changing the background colour to white and adding a drop shadow around the edges when hovered. I didn't think to include this in my example, as I assumed that once the tl had been killed it would just be a case of rinse and repeat in terms of applying the new hover effect! Clearly there's more to it than that!

Hey OSUblake, thanks for responding! Maybe my demo is a little overly reduced, I'll quickly go step by step: 1: User hovers over box - box turns blue and number (span) moves slightly along the x, y axis 2: User clicks box - all boxes turn green and height is reduced to 20px 3: User hovers over any box - boxes remain at a height of 20px and green and don't tween in any way when hovered over As I say, this is a reduced example and for the final effect contained on the website I'm building, it is the intention that once the user clicks on the box and the boxes all change to their green and 20px height state, I'm then able to apply a new hover effect on them but for the life of me, I can't figure out how to kill the original hover tween (tl) on all the boxes, once one has been clicked. Actually as I was typing this out, I did edit the pen a little changing the: $("body").on("click", ".item", function (e) { to $("body").one("click", ".item", function (e) { As the click only needs to be recognised once and I've added my attempts to kill(); the original hover tl to the onComplete of the animatieNav timeline, line 54. Hope that's all a bit clearer and many thanks for taking a look.

Hey, so I've created a nice little hover effect which I apply to several buttons using .each() but for the life of me I can't work out how to kill the hover effect so that I can apply a different hover effect to it after I apply a transition to the buttons. I know this is more of a logic problem than a GSAP one, but I've used every "kill" method I know of, but for the life of me I can't work out how or where to call the code so that it kills this hover effect. I've created a very reduced example. The intention is that when you hover the red boxes, they grow and turn blue, then when you click them, they shrink and turn green. At this point the hover timeline should be killed so that I can apply an alternative hover timeline but this is where I come unstuck. On lines 47 - 50 you can see my attempts to kill the timeline. Again, I know this is a logic rather than any inherent problem with GSAP but if somebody could point me in the right direction, I'd be very grateful. Thanks.

I can neither confirm or deny a PM has been sent... ?

Just as an aside, I seem to remember talk at one point of making that momentum style scrolling effect a part of the scroll trigger plugin, is this something that's still being considered or have I got the wrong end of the stick and that functionality isn't planned? Cheers.

Ah that's good to hear, I'll get everything updated. Cheers. ?

Just to note, I've just experienced this myself and I'm running the latest version of GSAP (3.7.0). Thankfully I've fixed it by moving the onStart callback out of the first tween and into the timeline, so this code triggered the callback twice: roomFlipTL = gsap.timeline(); roomFlipTL .to(thisFlip, { duration: 1, rotateY: "180deg", xPercent: 100, ease: "back.out(0.5)", onStart: closeFlip, onStartParams:[thisRoom] }, 0) This fixed it and it only called the closeFlip function once: roomFlipTL = gsap.timeline({ onStart: closeFlip, onStartParams:[thisRoom] }); roomFlipTL .to(thisFlip, { duration: 1, rotateY: "180deg", xPercent: 100, ease: "back.out(0.5)" }, 0) So I don't know if this is unexpected behaviour still or if I'm misunderstanding something about the onStart callback, either way I thought it worth a share.

Wow, I mean that is what it looks like? A ScrollTrigger native version of the smooth scrolling in locomotive scroll? That's fantastic if so, one less library to have to worry about in the future. The strongest of hat tips to the developer. Edit: Haha, yup, just seen the title of the CodePen and that's a pretty big clue. ? Brilliant.

Got it, everything working as expected. Thanks a lot Jack, really appreciate access to the early fix.

That would be really helpful, thanks a lot. Does the fix cover additional props such as font size or padding etc? Thanks again.

Hey folks, so I've been having great fun working with the new Flip plugin (really, top work) but when trying to integrate some of my tests into my main project, I noticed all the Flip calculations were completely off. After a while spent head scratching, I realised that it was caused by my alteration of the units in the GSAP config. I've added my config to a fork of one of your own demos, so you can see the issue: https://codepen.io/OneManLaptop/pen/zYoORPy I like to build my sites predominately in rem units, so it does save time and code to be able to set my tweens to use rems by default. I appreciate that this will be a bit of an edge case, but I thought I'd bring it to your attention and as I say, the ability to change default units is of genuine utility to me, so I hope I'm not making the case to drop that feature here. ? If there's a workaround, then that would be greatly received. Thanks.

Hey Zach, really appreciate the response and your helpful pointers. I did initially have GSAP handle all the animation, but I noticed that the GSAP flex tween seemed to give the animation a two step timing jump which native CSS transitions didn't have, so in this instance, I opted for a blend. As to the actual problem, I will indeed rebuild it as you say and separate the parts of the timeline out so that they're not fighting each other. Makes sense. As you can tell, I do often try to run before I can walk with the programming side of things. I'm basically a CSS / layout guy who fell in love with GSAP and that's pushed me to become familiar with javascript, but it can be a struggle. Anyway, thanks again for the response.

Hey folks. So I've been trying to apply a tween to a series of columns, which plays when the columns are individually hovered. I've completed this process several times for other projects, but for this project, I'm trying to not only tween the element I'm currently hovering over, but the elements I'm not and this is creating some unexpected and random behaviour. I've created a code pen with a reduced example which demonstrates the problem: https://codepen.io/OneManLaptop/pen/XWKBBpG The expected behaviour, is that when the user hovers over a column, the "Link" word fades out on all the surrounding columns, but remains for the one which is currently hovered. So for example, if the user hovers over the column containing Link 2, then the Link 1, Link 3 & Link 4 text on the other columns should fade out, but the Link 2 text should remain. When the user is no longer hovering over any columns, the "Link" text should return to an opacity: 1 value for all columns. The effect actually works as intended if you scroll the mouse over a single column from the bottom up, but when you move the mouse pointer over to the other columns from the left or right, then the "Link" text fades in and out on non-hovered columns, becomes stuck on the hovered element and just generally behaves very erratically. I am assuming the problems will stem from the tween being interrupted part way through and I have attempted to use .isActive() and .progress() to try and catch and finish the tween before it is triggered again, but these attempts failed and weren't fit for demonstration. I don't take this community for granted and I only ask for help when I'm genuinely stuck and I feel I've reached the limits of my own ability to fix things (watch it be something incredibly obvious now), so I am genuinely grateful to anyone who is prepared to take the time to help me with this. Thanks. ?

That's super Jack, indeed, problem fixed! Thanks so much. As @elegantseagulls, said, I totally appreciate you have to strike a balance between controlling for edge case bugs and optimising the file size, but this problem would have certainly made testing scrollTrigger features a more onerous affair, so I am delighted it's been resolved with just a few tweaks. Thanks folks.

Hey all. I'm building my first scroll trigger project (which is a stunning achievement... the plugin, not my ability to actually start a project hehe) and I may have stumbled across a conflict with how the markers are spaced when you change the units in the GSAP config. I prefer to use "rem" units when building websites, so I took advantage of the config method to switch most tweens to use them. When I tested my project after doing this, I noticed that there was a huge amount of white space added to the bottom of my website. After some testing, I discovered that either removing the config or setting markers to "false" fixed the problem, so I'm guessing that the marker placement is now using rems to position rather than pixels, which I'm guessing might not have been the intention.... or it is and I'm missing something. Which is perfectly possible. So I've thrown a simple test case together for you to poke and prod: https://codepen.io/OneManLaptop/pen/jOqZJbx I've set the default to "markers: true" and the config units have been declared. If you remove the config or set markers to false, the extra space disappears and everything is normal. As I say, perfectly possible I'm misunderstanding the intended relationship between markers and units here and this is normal behaviour, but I thought it was worth flagging. Thanks again for the amazing job team GSAP do.

This is great, some of these changes (particularly the switch from TweenMax to gsap and using the selector string) passed me by. When I start a new project I often copy older code over to use as a base! Time to update the base!

Cheers.

Just a quick addendum to this. Is there any way to use clearProps and have it clear all GSAP traces from each element tweened in a timeline, without having to list every element separately that you want cleared? Thanks.

Hey Carl, as ever thanks so much for looking at the demo and offering your advice. I've spent much of the morning experimenting with your suggestion and my demo and I'm much closer than I was in getting everything in the demo working. However there are still some noticeable issues and on reflection, the demo probably covers issues which perhaps go beyond the scope of what is reasonable to expect from a specialist, volunteer led forum such as this. Therefor I have decided to seek the assistance of somebody who can hold my hand - as it were - a little more and guide me through the logic of what it is I'm trying to achieve, in the hope that I'll develop a better understanding of the concepts and not just the nuts and bolts of working with time lines and functions. Happy to share the eventual results in this thread when ready. Thanks again.

Hello, Green Sock forum. I am having a few struggles which largely revolve around how to call and interact with time lines, which are nested inside a function. I have put together a very bare bones demo up on Codepen, which covers this. The expected functionality is: Click “click to run box”: 1: showContent function is called, which contains and runs the tlContent timeline. 2: onStart calls swapText function, which replaces large text with that contained in the data-text of the clicked nav link. 3: onComplete calls swapText function, which evaluates if tlContent is active, and determining it is not, replaces large text with that contained in the “stopped" variable. Click “click to reverse tween” 1: tlContent time line is reversed. 2: swapText function is immediately called (something akin to an onReverseStart) before any part of the timeline visibly begins to reverse. 3: swapText function is called via onReverseComplete and should display again, the “stopped" variable. So it’s basically a collection of difficulties I’m having, which are largely centred around how to call time lines which by necessity of needing to pass data stored in the clicked element, I’m wrapping inside a function. If there’s a better way to do this then I’m all ears. In addition to this, I have researched the various forum posts which discuss the (completely understandable) lack of a native OnReverseStart call, with some suggesting that the callback can be replicated via the onRepeat call, but as an onRepeat call requires a repeat rate to be set, I couldn’t get the desired functionality in this example. Although I’ll confess to being a bit fuzzy on the specifics of the implementations suggested. As ever, a hearty thank you to anyone who offers their time and insight to help me out.

Echo all that, sadly without being able to deliver a kickass GSAP powered New Years animation. Been a great year for the platform though, I really think the seeds are firmly planted for a lot of growth next year. My continued thanks to all the members and mods who have been so generous with their time in helping us poor mortals out. I hope one day I can pay it back in helping up others. Have a good one!

Hey, has the Codepen for this been deleted? Maybe it's a Codepen limitation / error, but given that this is a community centred around shared learning, it would be helpful if any Codepen's related to the thread were preserved, so that others can reference and learn from them. Thanks.

Thanks for taking the time to look and comment. Anchoring the offSet via an array was definitely the key to fixing it. Excellent, thanks so much, a fixed Pen always helps a lot. So I'm right in saying that by adding the array, you anchored the offset to the correct parent node so it doesn't change on each click, and by using offSetTop rather than jquery.offset.top(); you get the distance relative to the parent rather than the document? Sorry, I've been reading some StackOverflow posts trying to work out the practical differences between our two examples. I know this is a GSAP support forum not a general programming forum, but I really do appreciate the extent and quality of support people like yourself provide. So thanks.

I'm trying to use the scrollTo plugin to navigate around a div, however I'm getting unexpected behaviour, where the links don't seem to correspond to the element I want to scroll to and seem to erratically scroll along the y axis. As the stripped down example shows, the first three content blocks are anchored to the bottom of the container element, with the final content block being anchored to the top of the container. What I am looking to achieve, is to have the content scroll to the relevant relevant anchor, and where the scroll must move from a top to bottom content block, both the x and y axis are animated simultaneously, not an initial scroll along the x axis, and then a scroll along the y axis. Any help appreciated.