Jump to content
GreenSock

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

delux

Members
  • Posts

    10
  • Joined

  • Last visited

Posts posted by delux

  1. Hello!

    I have an animation of flying elements on gsap - the elements move slightly when the cursor moves, please tell me how to make these elements move (a little slower) even if you do not move the cursor?

    That is, the page loaded, and the elements began to float slightly .. moved the cursor - they move a little faster - is that possible?

    See the Pen eYJagvz by Alexandr (@Alexandr) on CodePen

  2. Hello!
    He dealt with all the above-described errors .. but here's the problem, I have the function of adding a class to the selector * - and it works badly .. if you look from a mobile phone - the class is added and deleted several times per second - this is very noticeable

    * White lines are added (change styles with a red background)

    Please tell me, maybe there is a simplified version of such a function?

     

    function addWhiteLines() {
        const animations = [];
        const white_lines = ['.mainBlock.pageHeader', '#desktop-menu li.main.active'];
        {
            let animation = new TimelineLite({ repeat: -1, onComplete: () => (animation.restart()) });
            animation
            .to(white_lines, 11.5333, {})
            .set(white_lines, {className:"+=show-red"})
            .to(white_lines, 8.4667, {})
            .set(white_lines, {className:"-=show-red"});
            animations.push(animation);
    
            $(window).resize(function(){
                animation.kill();
            });
        }
        return animations;
    }

     

     

  3. 12 minutes ago, ZachSaucier said:

    I think you want something like this?

    
    const tl = gsap.timeline({
      repeat: -1, 
      repeatDelay: 16
    })
    .to(element, 1.7, middleSize, 4)
    .to(element, 1.7, startSize)

    Here, as I understand it, the starting position is the 4th second, but how to add the finishing 8th second?



    Thank you very much for your responsiveness, but I apparently incorrectly formulated the question

     

    I need a certain element to start from the 4th second, animate 4 seconds, pause or stop for 8

    Our common slider consists of 5 screens, each screen is 4 seconds, each slide has a number of its own elements, and they should animate only on their own slide, and not endlessly - can this be done?


    My first slide worked, its elements went into transparency, but they continue to animate - which carries a heavy load - and so with each slide ((

  4. Please tell me whether this can be done:

    The element animates for 4 seconds (starting from the 4th second to the 8th), then pauses for 16 seconds, after which a restart occurs

     

            const tl = new TimelineLite({
                repeat: -1, onComplete: (w) => {
                    animation.stop();
                    setTimeout(() => {
                        animation.restart();
                    }, 16000);
                }
            });
            tl.delay(4);
            tl.duration(4);
            
            tl.to(element, 1.7, middleSize).to(element, 1.7, startSize);

     

  5. 48 minutes ago, ZachSaucier said:

    You could have an array of the animations and, depending on the index of the current section,  pause all of the timelines but play the relevant one with a matching index.

    I beg you, could you show this in my example?

    P.S Thank you very much for responding to my problem!

  6. Hello!

    I have a big slider with animations, and it gives a lot of load on the PC

    P.S. I apologize for the text with errors - I am writing through transliteration (my language is Russian)

     

    Question No. 1: How is it in those slides that are not visible to pause the animation, and run only for 4 seconds?

    Question No. 2: How to put a stop on the entire animation with media <768, and start a new one with media> 768?


    And is it possible to set the conditions for the media in the animation (I want to make it beautiful on mobile devices .. now we hide it)

×