Jump to content
Search Community

Pin section and animation on first scroll

scavaliere test
Moderator Tag

Recommended Posts

Hello everyone!
I'm struggling with this problem. In the codepen I attached, the first section slide up while the first title animates (fading in from top), while I would like to: 
- on the first scroll activate the "Title 1" animation
- the section must be pinned till the text animation has finished, then slide up
- after that, scroll can continue

 

I tried to replace as start attribute "top" with "+=10%" to move the start point, but in this way the section disappears after the first scroll.

Can you help me to figure out? 

Thank you in advance!

 

 

See the Pen a0ca61580735fc2ca23b9cbad62f8a48 by scavaliere (@scavaliere) on CodePen

Link to comment
Share on other sites

If not... then maybe you're trying to create an entrance animation that plays while scroll is disabled, and then when it's finished, enable scrolling again?

( I would advise against that from a user perspective), but if that's what you're after, you could create an entrance animation and at the end of it toggle a class applying overflow:hidden on the body. 

https://stackoverflow.com/questions/28411499/disable-scrolling-on-body

 

 

Link to comment
Share on other sites

Hello @Cassie! Nice to see you again :)
Actually, taking a look to the demos, it's not exactly what I need. 
I would need to animate the title and then the first section. The examples shows multiple animations on different elements on scroll. 
I would only like to pin the first section till the animation is finished.
About the second solution you provided, I would say no, I don't need  to disable the scroll. 

Hope it's clearer. 

  • Like 1
Link to comment
Share on other sites

No - I don't think I'm on the same page as you sorry.

If you have an initial animation that's time based and another which is triggered by scroll, there's no way to stop the second from overlapping the first unless you hijack the users scroll somehow?

A pin is based on a certain scroll distance. You're trying to pin for a certain duration. Those are different things. 

Link to comment
Share on other sites

You saying 'On the first scroll' and 'after that the scroll can continue' is pointing towards an observer based route in my head.

Maybe you looked at that demo in the observer docs and assumed I was talking about the aesthetics of the animation rather than the functionality behind it? Maybe let me know what the 'first scroll' is to you? That might point us towards the right direction.

(Also hi! And sorry... heatwave, my brain is operating on 10% capacity)

Link to comment
Share on other sites

Hello @Cassie,
my first animation it's not time based (in few words, it's not triggered after a specific time - is it correct?).  The title animation is triggered by scroll, same thing happens with first section slide up. Both are managed by scrolltrigger. 
About your last reply, I will try to be more clear: 

- the page loads :)
- on the first scrollwheel (or touch), the title should fadein from top. In this specific moment the first section (the blue one) shouldn't start to slide up but stay in its place
- after the first scroll, also the blue section can start to slide up and the user can continue to scroll the page.

 

Link to comment
Share on other sites

Your first animation is a specific duration. It's not tied to the scroll progress. It's time based.

This is an Observer (or event based) thing not a ScrollTrigger  thing - ScrollTrigger is based around the distance a user scrolls, there's no concept of 'first scroll or touch' Observer listens to events and you can write code to play specific animations when the events fire.

Quote

- on the first scrollwheel (or touch), the title should fadein from top. In this specific moment the first section (the blue one) shouldn't start to slide up but stay in its place


Again, this implies that at some point prior, they can't scroll the page.

Quote

...and the user can continue to scroll the page.


I can't fork your demo, but here's a version with all the animations scrubbed on one timeline. With this snippet everything is controlled (scrubbed) by the scroll position so you can say, do this first, then this, then this.

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#container",
    start: "top top",
    end: "+=150% bottom",
    scrub: true,
    markers: true,
  }
});

tl.to(".heading", {
  autoAlpha: 1,
  y: 0,
  duration: 1
})
tl.to(".up", {
  yPercent: -100,
  ease: "none",
  duration: 4
});
tl.to(".down", {
  yPercent: 100,
  ease: "power4.out",
  stagger: 0.4
});


If it's not on one timeline and the first animation isn't scrubbed then it'll play for a duration. If the second animation fires when the user scrolls to a certain position, there's no way to guarantee that the first animation is complete before the second triggers.

They exist in different spaces, one is ending at a certain time and the other is starting at a certain position. 

Link to comment
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.
×
×
  • Create New...