Jump to content
Search Community

How to scrollTo vertical sections (works) with sub section animation while in section

Maurits test
Moderator Tag

Recommended Posts

Hi, first of al thanks to you people doing an amazing job.
I roamed the forum and docs to find a solution that fits my issue, but to no avail.

What works:
Smooth scrolling through sections (vertically) - thanks to one of the topics


What we need:

We need one of the sections (#special) to stick and have its sub sections to animate on the same scrolling event.

It should feel like you stay in the #special section and the sub sections are animated with for example a fade in from y+100.

 

Always scrolling down should lead you through all sections and subsections and going up the whole thing in reverse

I have tried many examples, timelines etc, but cant seem to get it to work.
Snapping also seems to give a short delay in animating to the new positions. This codepen comes closest to the way we need it to scroll.
Just can't find a way to make a section stick and animate it's sub sections

I desperately need some advise for this has consumed days already :(

and hope you guys can lead me in the right direction.

Thanks :D 

 

See the Pen gOGPWoN by maurits-weebers (@maurits-weebers) on CodePen

Link to comment
Share on other sites

Hi Cassie,

Thanks for the codepen. 
It looks alright, but I miss the snapping to the sections.
I might be able to build that in but decided to stick with my current code. 


It's working now but it has some issues . I'll upgrade the codepen and share it again.
Would be great if someone could check it out and improve it where possible :D 

I'm also thinking about an array of all the sections in combination with a timeline. 
"Scrolling" through the array should then trigger all the tweens in the timeline. 

Link to comment
Share on other sites

I took a look at your codepen and I'm not quite sure what the behaviour is supposed to be, There's a lot of jumping around for me.

Regarding the demo I liked to - It would be super simple to add snapping in.

Just like so
 

let sections = gsap.utils.toArray('.section')

ScrollTrigger.create({
  start: 0,
  end: "max",
  snap: 1 / (sections.length - 1)
})


And horizontally (or for a pinned section animation)

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

  • Like 1
Link to comment
Share on other sites

Hi Cassie,

 

Thanks again for replying.
I've updated my code and now it works with my custom js. 
I'll tinker around with what you've send :) 
Is there a way to take away the short delay before the snap animation in your example?


The way my example feels now is good, although it lacks some functionality (like if a page is higher than vh)

What do you think of it? At least this is a good example of what we indent to build.

 

See the Pen by pen (@pen) on CodePen

 
 

 

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...