InTheOne

I have a timeline running with a scrub that looks best with a high scrub value playing forwards however on reverse I need to have no scrub or have a way to fast-forward the timeline to the start (ignoring the scrub) because the really slow scrub does not work well in reverse. Any ideas? You can see what I mean when you scroll back after passing the bottom of the city: http://phpstack-452338-1436478.cloudwaysapps.com/

Hi @Cassie, Thanks for your direction, putting lazy: false fixed the issue on the current version of GSAP for the images that would not consistently slide in. I also gave the Beta version a quick try and that fixes the issue even if you don't add lazy: false. Getting that issue out of the way helped me figure out that why issue#1 was happening. Basically the image would not load fast enough to get the width of the div I needed and my variable would come back as 0 half the time. I tried some techniques to try to delay the call until after the image loaded but that did not work. Then I realized that I could do some (relatively) simple math to calculate what the image width would be even before it loaded and that fixed my second issue. -Thanks! ?

I'm having a weird issue where one timeline and one forEach tween are only working some of the time after browser/page refresh. Both are using a scrollTrigger. Here is the site: http://phpstack-452338-1436478.cloudwaysapps.com/ Here is the JS File: http://phpstack-452338-1436478.cloudwaysapps.com/js/annagreen.js Issue #1 (happens about 80% of the time or every 8 out of 10 refreshes) On my timeline monkeyPipe (line 116) the .to(cityTopBackground, {scale: topCityScale, transformOrigin:'bottom center'},.03) tween is their so my top of city buildings will scale to match my bottom city buildings. It works great 50% of the time. The topCityScale (line 101) variable gets the scale value that I need to match the lower city image width (depending on screen size). Sometimes this does not get set properly because the cityTopBackground scales down to 0 due to my topCityScale variable coming in a 0 and not getting the proper value like it can sometimes get. Issue #2 (happens about 50% of the time or every 5 out of 10 refreshes) My fountCards.forEach (line 79) loop works as expected 50% of the time. The rest of the time the images don't slide in. I can see in the console that the div is getting triggered (lights up purple) but the values don't change. When it does work in the console it lights up purple and the values do change. I've tried a 4 or 5 of different JS methods to try to load the script after the page is fully loaded (I'm only assuming this is related to my issue) but none have worked. I'm currently trying the following: function ready(callback){ // in case the document is already rendered if (document.readyState!='loading') callback(); // modern browsers else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback); // IE <= 8 else document.attachEvent('onreadystatechange', function(){ if (document.readyState=='complete') callback(); }); } ready(function(){ //code is here }); Any help would be greatly appreciated. Thank you!

Hello, this code works on all browser except IE and I was wondering if there is a work around for IE: let mobile_menu = gsap.timeline({ scrollTrigger: { trigger: "#site_content", toggleActions: "play none none none", start: "top top", end: "bottom bottom", onUpdate: (self) => { if(self.direction == -1){ mobile_menu.reverse(); } else if (self.direction == 1){ mobile_menu.play(); } } } }); The issue is with calling "self" in the onUpdate Thank you!

@Carl, Thank you for your quick response, I really appreciate your help! I actually forked this from an older project b/c it was a good simple reproduction of the issue I was having (hence the older GSAP). I know this may sound strange but I learned jQuery before I learned regular JS and primarily work with WordPress so I'm kind of hooked on jQuery but have started to learn more about vanilla JS lately. Thanks again!

Hi, I'm using jQuery.each(); to build a timeline for multiple elements and have found good documentation on how to start the animation by clicking on the element that has the animation assigned to it, but I can't figure out how to use a button within the element's container to reverse the animation. I'm sure I'm pretty close I just can't quite figure out the correct syntax to "find" the animation when I'm not clicking on the element with the timeline assigned to it. Here's the example: $(".card").each(function(){ var myHeader = $(this).find("h1"); var myParagraph = $(this).find("p"); var tl = new TimelineLite(); tl.to(myHeader, 0.5, {x:100}) .to(myParagraph, 0.5, {x:100, color:"pink"}) .reversed(true);//this reverses the playhead at a time of 0. when you "un-reverse" on click it will play forward this.animation = tl; }) //un-reverse the animation of the card that is clicked on $(".card").click(function(){ this.animation.play(); }) $(".close_it").click(function(){ $(this).parents(".card").animation.reverse(); })

Hi! My fault I did not add the objects into the Config object properties vars (I'm combining two examples into one with this slider). Actually, I have not seen the vars list (in middle of this page: https://greensock.com/docs/v2/Utilities/Draggable) until now which makes things so much easier ?. @PointC I'm actually creating 3 different versions of your slider now. They are all still in development but very close to being done. As soon as I get them finished I'll create a simple version of them for CodePen ?.

This slider by Blake Bowen has and if statement like this: if (draggable.isPressed || draggable.isDragging || draggable.isThrowing) { It looks like the .isPressed and .isDragging no longer works in the V2 of Draggable. Is there an alternative I can use? https://codepen.io/osublake/pen/veyxyQ

Thank You! I'll post my version which is going to be a simpler hero slider that is not full screen when I'm done. Much appreciated.

I made a simpler example to troubleshoot why the drag function is not updating the active slide count: https://codepen.io/jonroc/pen/ZEGRRLY function slideAnim(e) { oldSlide = activeSlide; // dragging the panels if (this.id === "dragger") { activeSlide = offsets.indexOf(this.endX); console.log(activeSlide); } On the old setup the activeSlide variable is getting updated properly but with GSAP3 it always returns -1

Oh, no that fixed the issue for me in my application. I'm not sure what would be different about my setup to where I needed the 0 for it to work.

Hi, sorry for the slow responce. This issue was that I did not have a 0 in front of my .5rem. When I added that it solved the issue.

Hey, the man himself ?. Thank you, I'm much closer now but: There is an issue with the dots stagger animation Sometimes when I swipe right to left and then try to click the left arrow it gets stuck or I click the right arrow and it jumps way back to slide one or two. Sorry I thought this would be a little bit easier, this slider is a bit out of my level of expertise. Best.

I'm trying to convert Craig Roblewsky's CodePen Horizontal full-screen slider w/4 controls to GSAP 3 but I'm getting a console log error that I don't understand. Can anyone take a look and see if it's a simple fix? I'd like to use this slider with GSAP3. Thanks!

Ah, I was using ".5rem" instead of "0.5rem" which was actually causing the problem.