Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

InTheOne

ShockinglyGreen
  • Posts

    21
  • Joined

  • Last visited

Posts posted by InTheOne

  1. 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/

  2. 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! 😎

  3. 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! 

  4. 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!

  5. @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!

    • Like 1
  6. 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

    • Like 1
  7. 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 👍

  8. 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

  9. 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.

  10. 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

×