Jump to content
GreenSock

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

2 titles animation pause

Recommended Posts

Hello, i am using locomotive and gsap scroll trigger.

 

i Have 2 titles ( fade-up-title and fade-up-subtitle), i need in first, the title to fade-up then Pin till the second(subtitle animation complete) and then start the fading-up (the .to function)

var tls = gsap.timeline({
            scrollTrigger: {
                trigger: ".text-banner",
                scroller: ".o-scroll",
                scrub: true,
                start: "top top",
                end: "+=100%"
            }
        });


        tls.set('.fade-up-title span', {
            autoAlpha: 0,
            y: 100,

        }).fromTo('.fade-up-title span', {
            autoAlpha: 0,
            y: 100,
        }, {
            autoAlpha: 1,
            y: 0,
        }).to('.fade-up-title span', { autoAlpha: 0, y: -100});

        tls.fromTo('.fade-up-subtitle span', {
            autoAlpha: 0,
            y: 100,
        }, {
            autoAlpha: 1,
            stagger: 0.05, // stagger start times
            y: 0,
        }).to('.fade-up-subtitle span', { autoAlpha: 0, y: -100 })

 

Link to post
Share on other sites

Hey kobracode and welcome to the GreenSock forums. 

 

If you'd like our help debugging please create a minimal demo of the situation so that we can see what's going on exactly :) 

Link to post
Share on other sites

Hello, thanks for your response.

You may see here:

See the Pen mdrLdKd by skigo (@skigo) on CodePen

 

I need when entering in the section id="text-section" to scroll for 200vh(that means that the title fades up and pin then the text fade up and pin for a while and then move on top like they way that they fades in the start.

 

 

 

 

Link to post
Share on other sites

Sorry, I'm not following your end goal. Is there a site that shows the end goal of what you're trying to create? Or do you have a mockup of what you're trying to create? Perhaps rephrasing your goal or making code comments could also help us understand what you're trying to do.

Link to post
Share on other sites

Hey @kobracode

 

Is this, what you had in mind?

 

See the Pen RwGyNqg by akapowl (@akapowl) on CodePen

 

 

I'd probably .set() both texts to autoAlpha: 0 beforehand and in your timeline simply just use relative .to()-tweens for the animation part

 

        gsap.set('.fade-up-title, .fade-up-text', {
            autoAlpha: 0,
            y: 100,
        })

        var tls = gsap.timeline({
            scrollTrigger: {
                trigger: ".text-banner",
                scroller: ".o-scroll",
                scrub: true,
                start: "top top",
                end: "+=100%",
            }
        });

        tls
        .to('.fade-up-title', { duration: 1, autoAlpha: 1, y: 0 }, 0)
        .to('.fade-up-text', { duration: 1, autoAlpha: 1, y: 0, }, 1)
        .to('.fade-up-title', { duration: 1, autoAlpha: 0, y: -100 }, 2)
        .to('.fade-up-text', { duration: 1, autoAlpha: 0, y: -100 }, 2)

 

 

I would also recommend reading through the docs with regard to timelines once again, especially when it comes to scrubbing ScrollTriggers, their duration and position-parameter, since this appears to be the key-part of your timeline - and it seems to be a bit messy in your demo.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

 

Since I am not 100% sure if this is what you had in mind, it would help if you tried rephrasing your question, because I also had problems understanding.

 

Hope this helps.

Cheers, Paul.

  • Like 1
Link to post
Share on other sites

@akapowl thanks! Thats what i wanted. Also i need to ask, i am not really sure if the 200vh that i placed to section is correct? Or is any other way via scrolltrigger to set the scrolling duration to 200vh.
I need after the 

 .to('.fade-up-text', { duration: 1, autoAlpha: 0, y: -100 }, 2)

to add a delay before they fade out.

Link to post
Share on other sites
13 minutes ago, kobracode said:

is any other way via scrolltrigger to set the scrolling duration to 200vh.

Sure, there are several ways of doing that. If your trigger is 100vh you could do end: "+=200%".

 

14 minutes ago, kobracode said:

add a delay before they fade out

Again there are different ways to set that up. One way is to add an empty tween (like .to({}, { duration: 1 })).

  • Like 2
Link to post
Share on other sites

 

For your scenario, one way would be to set the section to be 100vh in your CSS and use a pinning ScrollTrigger to pin the entire section. Then you could easily adjust the end to make the animation have whatever duration you wish, and by adjusting the position parameter of the tweens inside your timeline accordingly , you could have the texts animate out whenever you wish.

 

One problem I am seeing, is that you are using the data-attributes that come with locomotive-scroll and are mixing them with scroll-trigger functionality.

Unless you know exactly which one does what exactly, you will run into problems, e.g. when it comes to pinning things (because I think, locomotive-scroll does something similar, or at least something that interferes with ScrollTrigger's pinning).

 

To get it working flawlessly with Scroll-Trigger pinning, I had to get rid off those data-attributes.

 

See the Pen mdrLeEY by akapowl (@akapowl) on CodePen

  • Like 3
Link to post
Share on other sites

Thanks for the reply, i was looking to use some sections with the scrolltriggers for on scroll animations, and some with the locomotive classes etc? Is'nt that possible? i need to use in some sections the data-scroll-section of locomotive and the rest animations, that locomotive has

Link to post
Share on other sites

 

40 minutes ago, kobracode said:

Is'nt that possible?

 

That's quite testable.

 

Here is the above example complemented by two locomotive pre-built section-effects.

 

See the Pen OJREvrJ by akapowl (@akapowl) on CodePen

 

So, of course you can still use the locomotive-pre-built sections with their effects alongside with ScrollTrigger.

 

I just wouldn't recommend doing so inside the same section, if you do not exactly know how locomotive-scroll handles the pre-built-effects on that section. Because if you don't know, the results on what you are trying to achieve with ScrollTrigger on that same section might just not work as you think they should, because these both are interfering with each other.

 

This is not to say, that you can not use ScrollTrigger on a section that also uses locomotive-scroll effects - you definitely can, but you will have to deal with the ins and outs of the pre-built locomotive-effects.

 

Hope this clears up what I wrote in my last post a bit.

 

  • Like 2
Link to post
Share on other sites

Great, i faced that issue cause i used locomotive effects and scrolltrigger.
Sth last i need after section text, when this sections finish to display one more section below, but without scrolling (when text section finishes, the new section should be already there, like(position:absolute;top:0;left:0;width:100%;height:100% and i will apply a fade in) how i can do that? like scrolling the 100vh.

Link to post
Share on other sites

 

I'm not sure I understand.

 

But if you want it to reveal it from underneath the green section, what you could do for example is set the section upwards 100vh via css (I did here via margin-top) and add a new ScrollTrigger that pins the section as soon as it hits the top of the window. Something like this:

 

See the Pen ExgRLwG by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to post
Share on other sites

thats really helpful, but i dont mean that, i want when the green sections finishes the orange should be over the green and i have to fade in. When the previous section finish, i need the orange sections be on the top of the screen, not below the green one.

Screenshot 2021-01-07 at 2.34.33 PM.png

Link to post
Share on other sites

 

Something like this ?

 

See the Pen abmKjGE by akapowl (@akapowl) on CodePen

 

The core of the concept remains the same; setting the section upwards.

 

Here I set it up 200vh instead, so it will be in place earlier. According to that I tweaked the position-parameter of the tweens in the timeline for the green section a bit and added an extra empty tween on the body, to make sure they act in a certain 'timeframe', so it is easier to set up another ScrollTrigger just for the fading-in of the orange section.

 

  • Like 3
Link to post
Share on other sites

That helps a lot, thanks!

i am starting getting better with scrolltrigger.

 

I need something more. Let's say here: i want the green section(.section.text) come over the red one with an opacity 0 and then starts blending with green and getting full of green and when exits the background turns to none. i Also found that:

See the Pen da1d36b83c758c3c4bf5c98c4fa70d8d by GreenSock (@GreenSock) on CodePen

 
but i am not really sure if its the same practise, because in my scenario is 2 different sections.

Regards

https://codepen.io/skigo/pen/ZEpjQEJ?

 

Link to post
Share on other sites

 

Hey @kobracode

 

3 hours ago, kobracode said:

I need something more. Let's say here: i want the green section(.section.text) come over the red one with an opacity 0 and then starts blending with green and getting full of green and when exits the background turns to none.

 

I don't think I understand what it is you are asking for.

 

 

2 hours ago, kobracode said:

i am starting getting better with scrolltrigger.

 

And also, since this is the case, how about you try giving what you want to achieve a shot yourself first, and share your results with us.

This way not only might it be easier for us to understand what it is, you are asking, but also will you learn way faster how to achieve these things.

 

I can't just do every thing you need for you - that is not what these forums are there for in the first place.

 

Sounds like for your latest request you could apply a similar concept as I have shown you before - but I am not sure, since as mentioned I am not really sure I understand. If you want further assistance on this, please try giving it a shot yourself first, and we can go and look where you might be going wrong - if so.

 

Cheers,

Paul

 

  • Like 5
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×