Jump to content
GreenSock

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

qqignatqq

Members
  • Posts

    61
  • Joined

  • Last visited

Posts posted by qqignatqq

  1. Hello. I have a function that animates a button to add an item to cart. If the user has not selected the color of the item, the button will be animated. The problem is that there are multiple buttons on the page and I can't use tween.restart() because I can't pass in restart() the button that needs to be restarted. If I use the animation directly in function(elem) {gsap.to.....}, then the animation breaks when I double click (on the second click when the animation hasn't finished yet). Try a quick double click on the "add to cart" button.

    https://jsfiddle.net/6c3ok48e/4/

     

    If there was a version of the code where I do this:

    let tween = gsap.timeline()
    .to(:obj,0.15, {scale:0.5, opacity: 0})....
    
    tween.restart({obj:this})

    then maybe this problem wouldn't have happened. 

     

    I understand that this problem is caused by overwriting the animation. Can you tell me if there is any way to solve this problem?

  2. Apparently I found a bug. It's really, really weird. So weird that I doubt it's even a bug. I tried to find a mention of this bug on Google, but I found nothing.

    SO...
    I actually recorded this bug on video:

    https://disk.yandex.ru/i/auE3Yt8DiGK57g

     

    but here is the text version:
    If you specify a font size of 2.8vw (in other sizes it happens too, but with a different probability) and a screen width of 600px, the 'y:0' animation will be executed as 'transform: translate(0%, -50%)'

    Here's the code
    https://jsfiddle.net/fLno0mq3/

     

    How can this be?

     

  3. 1 hour ago, Rodrigo said:

    Happy Tweening!!!

    Cool.
    Last question:
    Tell me, how much better is the first option than the second?

    // first
    let tl = gsap.timeline({paused: true, repeat: 1,yoyo: true,repeatDelay: 1})
    .to(msg, 0.25, {autoAlpha: 1,y: -40,ease: Expo.inOut}, "<");
    
    function showMsg(message) {
    msg.innerText = message;
    tl.restart();
    }
    
    //second
    function showMsg(message) {
    msg.innerText = message;
    gsap.timeline({repeat: 1,yoyo: true,repeatDelay: 1})
    .to(msg, 0.25, {autoAlpha: 1,y: -40,ease: Expo.inOut}, "<");
    }

    Or do they put the same load on the system? The first one is declared and restarted, and the second animation is prescribed immediately in the function and repeated.

  4. 13 hours ago, Rodrigo said:

    Finally if you want to pass the element to the specific callback by using the params property that each callback has:

    ok. If I want to make a universal animation and animate different objects with it, how do I do that?

    function animate(elem) {
    gsap.timeline({ease: "power1.inOut",repeat: 1,yoyo: true,repeatDelay: 3})
      .to(elem, { opacity: 0, scale: 0.5, transformOrigin: "center", duration: 0.3 })
      .set(elem, { text: { value: "ДОБАВЛЕНО", delimeter: " " } })
      .to(elem, { opacity: 1, scale: 1, transformOrigin: "center", duration: 0.3 }, "<")
    }

    I just assumed that it would be convenient to do it this way:
    declare a "tween" and pass in Restart() (or another action) the object to be animated. I mean something like this:

    const tl = gsap.timeline({ease: "power1.inOut",paused: true,repeat: 1,yoyo: true,repeatDelay: 3})
      .to(?, { opacity: 0, scale: 0.5, transformOrigin: "center", duration: 0.3 })
      .set(?, { text: { value: "ДОБАВЛЕНО", delimeter: " " } })
      .to(?, { opacity: 1, scale: 1, transformOrigin: "center", duration: 0.3 });
    
    tl.restart({object: ".target"});

    p.s.

    And thank you so much for the solution. I had completely forgotten about the ".set".

  5. Hello. I want to animate a button: 
    - old text disappears
    - new text appears
    - reverse animation.

    I used textPlugin, but I don't quite understand how to change sentences rather than individual words. At the moment it turns out that the old word hasn't disappeared yet, but the new one has already appeared and there is an overlap. 

    I was already thinking about abandoning textPlugin and using onComplete: () => {document.querySelector(".btn span").innerText = "newtext"}, but then I can't do a reverse animation because the previous text is not restored.

    view: https://jsfiddle.net/8nz6sw53/1/

     

    And another small question:
    gsap.to(".btn", {onComplete: (?elem?) => {elem.innerText = "new text"}
    Is there any way to pass a ".btn" object to a function to refer to it via elem?

  6. 51 minutes ago, Shaun Gorneau said:

    The reason this is happening is because you're forcing ScrollTrigger to recalculate on each onRefresh because the tween is killed. You can just omit the onUpdate call.

    Sorry for the silly question, but why is onUpdate needed? Won't it make things worse? At the moment I see that everything works, but won't something break in the future?

  7. Hello. I know I'm bringing up a closed topic, however recently akapowl posted in the thread https://greensock.com/forums/topic/17300-smooth-page-scroll/?do=findComment&comment=138046&_backrid=70811 and I got an alert since I'm subscribed to the thread. 

    The situation is this: I needed to make a fixed header that reduces its height when scrolling. 

    But a problem appeared: if I change the width of the window (the height does not change), then for some reason the animation is triggered. Here is an example: https://jsfiddle.net/trajwbzh/

    Here's a video: https://disk.yandex.ru/i/1B6YRGyO0eIg6A

    I need your help

  8. Oh, hello. I opened the source code for gsap, but I never figured out how the opacity animation works. 

    gsap.to("object", 1 , {opacity:0, ease:Expo.easeOut});

    What was this code supposed to look like in native JavaScript?

     

    This code will just make the object transparent, but it will not make it smooth:

    document.querySelector("object").style.opacity = 0;

    I assumed it might be "setInterval": however, I didn't find any lines with "clearInterval" in gsap code

     

    Here's what I was able to do...
    https://jsfiddle.net/eymw4o6j/2/

     

    I couldn't figure out how to put an operator in a variable, that is:
    if the current transparency value is less than the required one, there will be an operation: 
    objOp = objOp + nTime;
    and if it's more, then..:

    objOp = objOp - nTime;

    the only thing that came to my mind was to make "if" and make 2 options setInterval for each option...

    I didn't understand at all how ease works... So, does it change the step?

     

    How did you guys make gsap? It's unrealistically cool and beyond my comprehension.

     

    p.s. considering what I wrote, it becomes fantastic for me to have this command:

    gsap.to("object", 1, {y:10, ease:Expo.easeOut});

     

  9. Hello again. Can you tell us how to implement the same animation in pure JavaScript? I'm trying to repeat the action, but it doesn't work. Help me, please.

    The problem is the same as it was with gsap - the animation does not repeat itself if you click quickly several times.

    var playShowMsg;
    function myShow() {
    clearTimeout(playShowMsg);
    document.querySelector(".transition").classList.remove("showmsg")
    playShowMsg = setTimeout(function(){document.querySelector(".transition").classList.add("showmsg");}, 0);
    playShowMsg = setTimeout(function(){document.querySelector(".transition").classList.remove("showmsg")}, 2000);
    }

     

    https://jsfiddle.net/kf06dc5w/

  10. 6%? What?

    Wait, you have 6% where it shows? In Task Manager?  Or the Perfomance monitor in your browser?

    If you have 6%, I would venture to assume that you just have intel i9-9900KS.

     

     

    Quote

    will-change: transform;

    Yeah, I tried to use that. It didn't help.

     

    Quote

    xPercent and yPercent

    I tried, but it didn't help, but thank you for that, because I didn't know about xyPercent before.

     

    Quote

    Get your offsets outside of the event listeners...

    I'm not allowed outside. I have 20 of those blocks on my website. Only if you prescribe a separate animation for each block, but I don't think it'll help much. How can "this" load the CPU so much?

     

  11. Hello. I am animating, but I am observing a high load on the CPU.

    The essence of animation is as follows: when you hover over a block, the main image should approach and when you move the mouse on this block, the image should also move.

     

     

    video: https://yadi.sk/i/XfepvkILc7_0oA

    https://jsfiddle.net/j5bcuar3/5/

     

    1. Why is the CPU loaded? After all, as I understood, at animation the CPU should not be loaded.
    2. Hint, is it possible somehow to optimize this animation to reduce the load a little bit and increase the smoothness?

  12.  

    Hello. I really like the smooth scrolling that OSUblake did. 


    But I ran into a problem: my "position: sticky" doesn't work. I understand that it has to do with the fact that the Smooth Scroll animation itself works thanks to a fixed block. And the scrolling itself is an imitation. 
    Quote:

    Quote

    So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. This will allow the page to scroll, but the fixed container won't move. Now animate the y position of your content based on the scroll position of the page

    Can you tell me if there's any way to solve this problem?  

     

    https://jsfiddle.net/9amfw36d/2/

  13. 1 hour ago, Sahil said:

    You can use cookies and trigger the mousemove event by creating jQuery's event.

     

    https://jsfiddle.net/gpnta9oL/5/

     

    Instead of triggering event you can just set the cursors position on load so it won't animate from (0, 0).  A better way would to just animate cursor in on first event, like scale it up where mouse is. That way you won't have to worry about cookies and it also takes care of how cursor animates when user visits for the first time. I had to use quickSetter method to avoid overwriting transform as it will interrupt scaling animation.

     

    https://jsfiddle.net/gpnta9oL/12/

     

     

    Bug. It's not always the cursor that appears. 

    https://yadi.sk/i/ej_YxD89eVx-xg

×