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();
})

See the Pen JjEPZqJ by jonroc (@jonroc) on CodePen

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? 

See the Pen veyxyQ by osublake (@osublake) on CodePen

2 hours ago, PointC said:

@InTheOne I've updated the sliders and posted them in the original thread.

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:

See the Pen ZEGRRLY by jonroc (@jonroc) on CodePen

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:

1. There is an issue with the dots stagger animation
2. 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 

See the Pen YRzRyM by PointC (@PointC) on CodePen

Thanks!

See the Pen XWbqNWK by jonroc (@jonroc) on CodePen

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

+1 for full rem support 😀, I just spent an hour and a half trying to figure out why my animation did not look right only to find out it was related to use rem.

That is great! I'm including my new Pen in case anyone else wants to do a simpler version of the airplane CSS sprite. 

See the Pen BayYKYM by jonroc (@jonroc) on CodePen

On Firefox my fancy cat walk does not work at all on my website: https://phpstack-74099-1024495.cloudwaysapps.com/

On Codepen it works jankely.

How can I get this sweetness working on Firefox?

See the Pen dyPVdjr by jonroc (@jonroc) on CodePen

Yes, thank you. I didn't even think of using .each( ) ?, sometime I get stuck on one thing and get blinded. This is exactly what I was going for. Thanks!

I was trying to create a simple button hover effect using the jQuery(this) on the button. When you swipe your mouse over the button real fast the hover out animation triggers and does not allow the hover in animation to finish. This causes the button to get smaller and smaller and causes the text to stack up. I've seen solutions for this problem but none of them allow me to use jQuery(this) in the timeline. Any help would be much appreciated. ?

See the Pen rNaLwdQ by jonroc (@jonroc) on CodePen

I'm new to GSAP. Can anyone help me figure out why my animation is running before it's triggered by ScrollMagic?

See the Pen paXzyE by jonroc (@jonroc) on CodePen