RubberFruit

June 19, 2023

On 6/9/2023 at 2:59 AM, Rodrigo said:
Hi,

This is basically about adding an extra instance to the timeline after the loop that takes all the elements that extra step forward, soto speak.

I'm having a few issues trying to follow your code, it's almost 250 lines and I'm not sure what is doing what exactly. To give you some idea it should be something like this:
const tl = gsap.timeline({
  // Timeline and ScrollTrigger Config Here
});

elements.forEach((element, index) => {
  // Your loop stuff here
});

// After the loop add a final instance to the timeline
// that moves everything to the final position
tl.to(elements, {
  // Config here
});
Hopefully this helps.

Happy Tweening!

Thank you very much for your help! I got a "clumsy", but working visually good animation)) I have 1 more question: if I log in from a mobile device and try to scroll down very quickly, is there such an opportunity to somehow slow down or stop the scroll in front of the section with pin cards so that in the case of a large scroll, the user still starts viewing the section with first card and first text?

June 6, 2023

13 hours ago, Rodrigo said:

I don't really follow what you mean with this. Please be more specific about what's happening and if possible include a minimal demo of the behaviour.

I'll show you in the screenshot: on the left - the moment when we scrolled to the section (1 card), on the right - we scrolled to the 3rd card. The distance from the text to the block of cards changes, as does the distance from the cards to the navigation points

June 5, 2023

On 6/3/2023 at 4:47 AM, Rodrigo said:

Hi,

You have to add a check so the text out animation doesn't run if the element is the last one. In this case this seems to work:

$verticalTextItems.each((index, item) => {
  gsap.set(item, {
    yPercent: index === 0 ? 0 : 100,
    opacity: index === 0 ? 1 : 0
  });
  if ($verticalTextItems[index + 1]) {
    timelineText
      .to(
      item,
      {
        yPercent: -100,
        opacity: 0
      },
      "+=0.5"
    )
      .to(
      $verticalTextItems[index + 1],
      {
        yPercent: 0,
        opacity: 1
      },
      "<"
    );
  }
});

Here is a fork of your codepen:

Hopefully this helps.

Happy Tweening!

Thank you very much once again!) Can you help with the meanings of the cards so that they do not go "to the right and up" when changing? I have no idea why this is happening ... Do I need to change the parameters for the initial installation or what?

I updated the codepen once again, it's much better, but I have 1 more question: when resized, the cards lose their position and move to the left on the mobile version + the problem with shifting the entire scene to the right ((

See the Pen OJaLgQv by rubberfruits (@rubberfruits) on CodePen

June 2, 2023

1 hour ago, RubberFruit said:

Thanks a lot for your help! I'll try to adapt your example for a scroll trigger) Another question - how can I "stop" the animation for a 3 vertical text element when it reaches the middle? So that at the end of scroll 3 the text element continues to go up?

I did very badly (updated the codepen), but it works! Please can you help me with the following issues:

1) When a new card appears from behind, the entire "scene" with cards shifts to the right (Can you please help with timings and values so that the whole "scene" seems to stay in one place when scrolling)

2) So that the animation ends when the 3 text is in the middle of the screen (so that it does not scroll further up)

See the Pen gOBVLQR by rubberfruits (@rubberfruits) on CodePen

June 2, 2023

8 hours ago, Rodrigo said:

Hi,

In this cases is better to create your animations in advance and then add ScrollTrigger to the mix. Also right now you are creating two different timelines which I think is causing more issues than it's solving.

Here is an approach that creates a single timeline for each element and then, sets each timeline on a specific position based on the current index of the loop. This has no ScrollTrigger built into it, just a proof of concept of how to approach this in a dynamic way:

Now, plugin ScrollTrigger into this is a bit of a challenge I'll have to say, especially with a dynamic approach. I think the best way would be to manually create the animations and add them to the same timeline that controls the texts using the position parameter. Like that you can position each card animation precisely where you want/need it. Sure thing is not the most elegant solution for this, but sometimes the simplest solution, which can be a little bit verbose and not extremely elegant is the best one.

Hopefully this helps.

Happy Tweening!

Thanks a lot for your help! I'll try to adapt your example for a scroll trigger) Another question - how can I "stop" the animation for a 3 vertical text element when it reaches the middle? So that at the end of scroll 3 the text element continues to go up?

May 31, 2023

3 hours ago, RubberFruit said:

Thank you very much, it worked as it should! Can you help with cards? I finished the animation, but it doesn't work at all as it should. How can I make the cards seem to change each other, moving "forward" one by one and going to the end (like on https://www.luminartech.com/), and not all together like mine. I also commented out the text scroll on the left, because for some reason the text scrolls first and only then does the card animation start working.

I updated my codepen, I managed to combine 2 animations and almost achieve the desired result, but I can not understand why onComplete does not fire after changing the z-index ( I want the card to fall into place of the first card, and the same thing happens with 2 so that when the scroll was rotated, but instead they remain in their places)

May 31, 2023

8 hours ago, Rodrigo said:
Hi,

The problem is in the logic of your loop. Basically you're setting the start position of the elements and then moving them out of the visible section in one motion with no pause between them.

This seems to work the way you intend:
$verticalTextItems.each((index, item) => {
  gsap.set(item, {
    yPercent: index === 0 ? 0 : 100,
    opacity: index === 0 ? 1 : 0
  });

  if ($verticalTextItems[index + 1]) {
    timeline.to(item, {
      yPercent: -100,
      opacity: 0,
    }, "+=0.5")
      .to($verticalTextItems[index + 1], {
      yPercent: 0,
      opacity: 1,
    }, "<")
  }
});
Also there is no need to set the yPercent to anything above 100 in the set instance since you have absolute positioned elements. Pushing them beyond that point has no effect.

Here is a fork of your codepen:

Hopefully this helps.

Happy Tweening!

Thank you very much, it worked as it should! Can you help with cards? I finished the animation, but it doesn't work at all as it should. How can I make the cards seem to change each other, moving "forward" one by one and going to the end (like on https://www.luminartech.com/), and not all together like mine. I also commented out the text scroll on the left, because for some reason the text scrolls first and only then does the card animation start working.

May 30, 2023

Hi guys! I'm trying to make a copy of the vertically scrolling section from https://www.luminartech.com/ (section 5 in a row).

I can't figure out why my text on the right is scrolling so fast and can you help / hint how to implement such a cool card change on the right? Thank you very much in advance!

See the Pen vYVwzbN by rubberfruits (@rubberfruits) on CodePen

January 26, 2023

On 1/24/2023 at 1:07 PM, Cassie said:

I don't know what you mean by 'one smooth iteratation' or 'iterable' in this sense

Do you maybe want the vertical animation to not be tied to scroll? Like this?

No, I had it tied to the scroll, but each scroll scrolled the vertical text 1 word up, not just the number of pixels up) Is this real?

January 24, 2023

14 hours ago, Cassie said:

Nope. I'm lost. Sorry.

Try explaining again? The best way to explain is to use as little jargon as possible and just step through visually what you'd like to happen. Jargon gets translated in different ways in peoples heads.

Permission granted to talk to me like I'm 5 and I've never used GSAP or coded anything in my life.

There is probably a problem with the translator, so it's hard to understand me, now I'll try)) The site is loading, I start scrolling, the main section does not scroll (that's why the pin is set in the settings), at this time the horizontal scrolls (just like it works now, in the codepen above, with the scrub setting - scrolled a little, the text scrolled a little), scrolls to vertical text, but vertical text scrolls differently - no matter how much we scroll, exactly 1 smooth iteration of the vertical text scroll animation is played, which is not tied to scrub (now the vertical text scroll animation plays exactly the same as the horizontal one)

The problem is that this is one timeline, which for horizontal text should work as it does now, and for vertical text there should be an iterable animation and I don’t understand how to do it(

January 23, 2023

1 hour ago, Cassie said:

I have a feeling that you're trying to emulate events, trying to 'jump down' to a section automatically feels like that.

You're trying to do this sort of thing right?

If so - This isn't going to be a scrollTrigger solution - you'll have to look into observer for that. ScrollTrigger understands scroll distance, but doesn't have a concept of 'one scroll with the mouse wheel' that's an event, not a pixel distance.

I would advise against mixing up normal scrolling and event driving scrolling like this unless you really know what you're doing and you're going to test extensively. It's quite jarring to jump from normal scroll, to event driven scroll and back to normal scroll again. As I mentioned in the post earlier - there are going to be UX/accessibility implications because you're hijacking how the user navigates.

Here's an example of mixing observer type events and normal scrolling -

Thanks for the answer! No, I abandoned the idea of scrolling to sections, I wanted to know if it is possible to combine the scrub animation of the horizontal text scroll and the scroll (which you showed in the example) for vertical text))

January 23, 2023

On 1/21/2023 at 8:29 PM, Cassie said:

Nope, sorry, I'm not understanding this at all.

I've got rid of the scrollTo and the white bit for clarity -

The second section's start trigger is in the same place as the first section's end trigger. It's starting exactly where I would expect, right where the markers show the start position to be - What is it that you're expecting to happen? Can you explain a little more clearly?

I have one more question)) How can I make it so that the animation of the vertical text is applied animation so that "1 scroll with the mouse wheel" = "1 change of the vertical word"?

I can't figure out how to do this because the timeline is attached to an animation that:

1 - scrub

2 - main section is in pin state

3 - animation should start after scrolling horizontal text(

January 22, 2023

21 hours ago, Cassie said:

The second section's start trigger is in the same place as the first section's end trigger. It's starting exactly where I would expect, right where the markers show the start position to be - What is it that you're expecting to happen? Can you explain a little more clearly?

I found where the error was ... I launched the animation for the first section after the window.load event, and for the second section without this event ...)) Thank you very much for all help))

January 22, 2023

21 hours ago, Rodrigo said:

Hi,

You can check the youtube channel:

https://www.youtube.com/c/GreenSockLearning

Also @Carl has some great learning resources at a very good price, over 200 videos where he covers a lot of different aspects of GSAP with an extremely reasonable lifetime access price. He's been involved with GSAP for over 10 years and is a great teacher as well:

https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

Happy Tweening!

Thank you very much, I'll try)

January 21, 2023

4 hours ago, Cassie said:

I don't understand your second question though, sorry - could you elaborate a little?

At the moment, it works as if the ScrollTrigger from the second section does not know that the main section is in the "pin" state and about 1/3 of the animation of the main section, the animation of the next section begins (as if the main section is not in the "pin" state)

4 hours ago, Cassie said:

It's hard to advise without knowing exactly what you're after. I would try to avoid animating layout props like top/left and use transforms instead. FLIP plugin is great for animating between layout positions. But this may be easier than that? If you're just moving a block around the viewport you could probably just use vw and a fixed container

My page will consist of 5-6 sections and when we scroll the fixed block should move smoothly (no scrub). Example: 1 section - the block is in its original position - left:50%; bottom:50px;, 2nd section - fade to left:60%; bottom:100px; etc.

FLIP plugin? Ok, thanks, I'll definitely take a look and figure out how to use it!!)

January 21, 2023

13 hours ago, Cassie said:
Hey there!

It's largely down to getting your trigger points in the right place. It's a lot easier if you use markers for debugging.

Here's an option using the previous scrollTriggers 'end' point as a 'start' position
  ScrollTrigger.create({
    animation: mopTl,
    trigger: $mainSection,
    invalidateOnRefresh: true,
    once: true,
    scrub: false,
    start: self => self.previous().end,
    markers: true,
    id: 'mop'
  });
I'm not going to get rid of the user's scroll for you, it's pretty bad UX to do that, but here's some information if you do pursue it!

https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

Hope this helps!

Hi, yes, that helped a lot, thanks a lot! Do you think it's better to leave the user to scroll?

What could be wrong with the problem I described in point 2? Is there also a better way to track the start of the ScrollTrigger after the animation ends with the first section?

Are there any examples of animating a fixed block across the entire document? I thought about attaching a trigger to the "body" and tracking it. Is this a good idea or is it better to do something differently?

January 21, 2023

10 hours ago, Rodrigo said:
Hi,

You could create a new from instance in the same timeline with a delay, using the position parameter. Something like this:
const animationTl1 = gsap
.from(animationItems1, {
  translateY: 100,
  stagger: 0.075,
})
.from(animationItems1, {
  opacity: 0,
  stagger: 0.075,
}, 0.1);// <- Here
In the code above there is an extra animation for the opacity, with the same stagger time for each element, that starts 0.1 seconds after the first instance in the timeline.

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

Thank you very much, you helped me a lot!! Another question, are there any resources / videos / courses that show the advanced level of using GSAP? (except for the library - unfortunately, English is not my native language and I would like to see the result on videos or articles)

January 20, 2023

Hi guys ! I'm trying to make a transition animation from the first screen to the second, but it doesn't work out completely.

1) How it should look like: the horizontal text scrolls to the left, reaches the vertical scroll, the vertical text scrolls (to vertical4 in the example),

and then a decorative block with a white stripe goes from top to bottom, which disappears after a moment and the main section smoothly scrolls to the second one and all this time the main section is in the pin state, the user does not have to "scroll" the page.

What goes wrong: a decorative block with a white strip appears, but only (!!!) after the 1 section exits the pin state and scrollTo for some reason does not work, but rolls back the previous animation ( Please help!

2) I couldn’t show this with an example, but for some reason my ScrollTrigger of the next section works locally as if the first section is not in the pin state. Why can this happen?

3) This project will have a fixed block (small picture with message), which, while scrolling throughout the document, will change its coordinate. (section 1 - init position, section 2 - smooth movement to another fixed position, section 3 - smooth movement to another fixed position) How can I implement this?

Please help, I will be eternally grateful!

See the Pen LYBeyJP by rubberfruits (@rubberfruits) on CodePen

January 20, 2023

11 hours ago, Rodrigo said:
Hi,

The issue is that you're looping through all the elements and adding a Tween for each element to a timeline. By default GSAP adds a new instance/label/callback at the end of the timeline, right after the end of the previous one.

If you want all elements to come in at once just tell GSAP to add the elements at the start of the timeline, using 0 in the position parameter:
animationItems1.forEach((item, i) => {
  animationTl1.from(item, {
    opacity: 0,
    translateY: 100,
    duration: 0.5
  }, 0); // <- Position - all instances are added at the start of the timeline
});
If you want to create a stagger effect with a loop use the index value in the loop:
animationItems1.forEach((item, i) => {
  animationTl1.from(item, {
    opacity: 0,
    translateY: 100,
    duration: 0.5
  }, 0.075 * i);
});
If you want to create a stagger, don't loop the elements. Pass the array to GSAP and add a stagger value. GSAP does the looping for you:
const animationTl1 = gsap.from(animationItems1, {
  opacity: 0,
  translateY: 100,
  stagger: 0.075,
});
Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

Thanks a lot! Your third option worked exactly as I wanted!))

Another small question: if I want the opacity animation to start a little later, do I need to make a separate timeline for this, or can I somehow set a delay only for opacity immediately inside "from"?

January 19, 2023

1 hour ago, Rodrigo said:

Hi,

Is really hard for us to debug a codesnippet based on a description and a video. Please provide a minimal demo that clearly illustrates the problem. Please don't include your entire project, just some divs and elements that show the issue so we can tinker with it.

Happy Tweening!

Hello!) I made an example and it is very similar to what is happening in the video. Why is there a delay here too, although I did not specify it? Attached to my first comment)

I really want to get such a result : so that after passing the beginning of the trigger, the animation is played completely, without reference to the scroll (opacity and translate) and so that from the beginning of the first animation (header) all animation traces go with a delay of ~ 0.1ms (to have a consistent effect). How can I add such a result and what have I already done wrong?

January 19, 2023

Hello! Guys, can you help please. I want to animate the appearance of each labeled block with transparency and exit from the bottom, so that each next element appears with a small delay. I tried putting the position attribute in from (which comes at the very end), but it didn't work, I tried staggerFrom - that didn't work either. As a result, I got it and I don’t understand why there is a delay between animations, although I didn’t specify it, but this doesn’t suit me either, because it works too fast (duration doesn’t work, the delay attribute does not affect the delay itself between elements). Moreover, the animation on the buttons does not work for some reason (showed on the video, although the blocks are marked). Can you suggest what I'm doing wrong? Thank you!

Link to current result : https://veed.io/view/ebbb758d-974b-451c-9cac-8877cc09f0b9

gsap.config({
            autoSleep: 60,
            force3D: true,
            nullTargetWarn: false,
            trialWarn: false,
            units: {left: "%", top: "%", rotation: "rad"},
        });

        gsap.registerPlugin(ScrollTrigger);

        ScrollTrigger.normalizeScroll({
            type: "touch",
        });
        ScrollTrigger.config({
            limitCallbacks: true,
            ignoreMobileResize: true,
        })

const animationTl1 = gsap.timeline({
            paused: false
        });
        let animationItems1 = gsap.utils.toArray("[data-animated-item-from-bottom-with-delay-slider]");

        animationItems1.forEach((item, i) => {
            animationTl1
                .from(item, {
                    opacity: 0,
                    translateY: 100,
                    duration: 0.5
                })
        });

        ScrollTrigger.create({
            animation: animationTl1,
            trigger: "[data-slider-animation-section]",
            start: "top 55%",
            end: "top 55%",
            scrub: 2,
        });

See the Pen qByVQor by rubberfruits (@rubberfruits) on CodePen

December 29, 2022

3 hours ago, RubberFruit said:

Thank you very much, I made it vaguely reminiscent of the desired result!)) Can you help me: I removed the scrub from the text so that on 1 scroll the full animation is played with transparency and the text moves up, but then the ability to play the animation back disappears if I scroll back up( achieve the desired result without a scrub?

I had to rearrange scrub from boolean value to 1)

December 29, 2022

17 hours ago, Cassie said:

Hi there! Welcome.

Here's a little starting point for you. It's basically just a tween that's handling opacity with a ScrollTrigger attached to tie it to the scroll position.

This article is also a great place to go when you're learning - It's best to think of GSAP is a series of tools you can use to create any kind of animation you can dream up. Learning the core concepts will be much more useful than trying to look for specific effects on codepen.

Good luck with your learning journey!

Thank you very much, I made it vaguely reminiscent of the desired result!)) Can you help me: I removed the scrub from the text so that on 1 scroll the full animation is played with transparency and the text moves up, but then the ability to play the animation back disappears if I scroll back up( achieve the desired result without a scrub?

December 28, 2022

Hello everyone, I'm new to gsap, can't find a codepen animation example like on main appletv screen(https://www.apple.com/ae/apple-tv-plus/), didn't find ScrollTrigger in the demos either. Can someone give me a hint or link to codepen with similar effect?

December 22, 2021

17 hours ago, OSUblake said:

What do you use a different scroller for? If you're trying to prevent the address bar from moving, this pen might help.

URL to test on mobile...

Pair with CSS Scroll Snapping - ScrollTrigger Live Preview (codepen.io)

I use it for a different look and feel and the whole project is already built on using it That is, you suggest that the card should not be fixed at the top of the screen, but gsap itself scrolled it to the top?

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by RubberFruit