Jump to content
Search Community

Sticky elements in the 'Full-Screen Slider' by PointC?

kristoffer test
Moderator Tag

Recommended Posts

I'm new here and a newbie on GSAP and web design in general. I'm exploring the beautiful 'Vertical Full-Screen Slider' by PointC and have a question.

 

Is there an simple/elegant way to integrate sticky elements into the 'Full-Screen Slider' that is triggered by either scroll position or slide number? Preferable without using Scroll Magic.

 

Thanks,

Kristoffer

See the Pen MzWzyv by PointC (@PointC) on CodePen

Link to comment
Share on other sites

Hey Kristoffer and welcome to the GreenSock forums. 

 

10 hours ago, kristoffer said:

Preferable without using Scroll Magic.

Ah, a breath of fresh air ;) 

 

10 hours ago, kristoffer said:

Is there an simple/elegant way to integrate sticky elements into the 'Full-Screen Slider' that is triggered by either scroll position or slide number?

What exactly do you mean by "sticky" I can imagine a few different behaviors depending on which element is "sticky". Can you please describe the behavior that you're wanting a little more explicitly?

  • Like 1
Link to comment
Share on other sites

5 hours ago, ZachSaucier said:

What exactly do you mean by "sticky" I can imagine a few different behaviors depending on which element is "sticky". Can you please describe the behavior that you're wanting a little more explicitly?

Yes sure, and thank you for responding. The "sticky" element is meant to be an animation that remain visible on the website and triggered (play/pause) as you scroll through some of the pages. The idea is to have the animation sticky for about 4 pages, then scroll away together with the content going to page 5. I'm getting inspiration and ideas from this website: http://accord.trafficdemos.com/(there fullpage.js used, mp4 for the animation, and GSAP for pretty much everything else) 

 

It will be either mp4, lottie, or jpg/png sequence (need to experiment to see what works best).  Not sure if it will cover the whole background or just part of the page. The animation itself will be made in Blender from a CAD model of a motor - a little similar to the youtube clip below, but just much shorter (~10 seconds) and far less details, just to give you an idea. 

 

 

 

 

Link to comment
Share on other sites

1 hour ago, kristoffer said:

I'm getting some of those inspiration and ideas from this website: http://accord.trafficdemos.com/

That website has a very different approach to navigation. The approach that it uses is something along the lines of this:

  • Play intro animation.
  • If not animating and scrolled down, animate from state 1 to state 2 (update the video, fade in/out text).
  • If scrolled up or down, animate from the current state to the next or previous state depending on the scroll direction.

In addition to that, if the navigation circles are clicked it just loads straight to that state (just fading out and in) ignoring all states in between.

 

Hopefully you see how different that is compared to the demo that you linked to above :) Most likely you just need to know the scroll direction and the current state and won't have the page actually scroll at all. Does that make sense?

 

1 hour ago, kristoffer said:

It will be either mp4, lottie, or jpg/png sequence (need to experiment to see what works best).  Not sure if it will cover the whole background or just part of the page. The animation itself is made in Blender from CAD - a little similar to this youtube clip but just much shorter (~10 seconds) and far less details, just to give you an idea. 

For something like an engine I highly recommend using WebGL or just videos (like the site you link to). It's much more performant for complex shapes and animations. You can also use shading which is very handy for this sort of thing.

  • Like 1
Link to comment
Share on other sites

36 minutes ago, ZachSaucier said:

That website has a very different approach to navigation. The approach that it uses is something along the lines of this:

  • Play intro animation.
  • If not animating and scrolled down, animate from state 1 to state 2 (update the video, fade in/out text).
  • If scrolled up or down, animate from the current state to the next or previous state depending on the scroll direction.

In addition to that, if the navigation circles are clicked it just loads straight to that state (just fading out and in) ignoring all states in between.

 

Hopefully you see how different that is compared to the demo that you linked to above :) Most likely you just need to know the scroll direction and the current state and won't have the page actually scroll at all. Does that make sense?

 

For something like an engine I highly recommend using WebGL or just videos (like the site you link to). It's much more performant for complex shapes and animations. You can also use shading which is very handy for this sort of thing.

For the scroll behavior i was actually hoping for a more traditional approach than the Accord website. Like the Apple Airpod website https://www.apple.com/airpods-pro/ except with a scroll that snaps to each page. 

The idea is to have the engine animation as video or lottie. GSAP will be used for text animation, kind of how it is done on the Accord website.

 

 

 

Link to comment
Share on other sites

6 minutes ago, kristoffer said:

For the scroll behavior i was actually hoping for a more traditional approach than the Accord website. Like the Apple Airpod website https://www.apple.com/airpods-pro/ except with a scroll that snaps to each page.

In that case, take the demo from above and fix the position of the content of each container. Then animate in the correct section's content based on the currently active section.

  • Like 2
Link to comment
Share on other sites

7 hours ago, ZachSaucier said:

In that case, take the demo from above and fix the position of the content of each container. Then animate in the correct section's content based on the currently active section.

Don't think I follow. I tried to fix an element by using a opposite offset from the container to cancel out the transformation and leaving the element fixed, but that didn't work very well. 

 

From this:

     TweenMax.to(container, dur, { y: offsets[activeSlide], ease:Power2.easeInOut, onUpdate:tweenDot });

to this:

     var timeline = new TimelineMax();  
     timeline.to(container, dur, { y: offsets[activeSlide], onUpdate:tweenDot })
             .to("#fixed", dur, { y: -offsets[activeSlide] })
             .restart();

See the Pen wvaXJBd by krispen (@krispen) on CodePen

Link to comment
Share on other sites

8 hours ago, kristoffer said:

Don't think I follow. I tried to fix an element by using a opposite offset from the container to cancel out the transformation and leaving the element fixed, but that didn't work very well. 

You're over complicating things. For each content section, create a new element that holds all of the contents. Then set position: fixed; on that newly created element. Then animate those elements as needed.

  • Like 1
Link to comment
Share on other sites

On 3/18/2020 at 8:23 AM, ZachSaucier said:

You're over complicating things. For each content section, create a new element that holds all of the contents. Then set position: fixed; on that newly created element. Then animate those elements as needed.

Ok I think I understand what you mean, basically as a regular "sticky"/fixed header. The only issue I face is that fixed elements doesn't seem to oblige to standard rules when parent use CSS transform, so unless there are some tricks to fix that then an option is just to keep the fixed element outside of the sliding container (#panelWrap), which is ok too I guess.

 

Thanks for your help.

Link to comment
Share on other sites

Seems to me that this doesn't really need slides. I'd probably create a timeline with a bunch of labels and scrub it via mouse, arrow, scroll wheel etc. I just stripped a bunch of the unnecessary stuff out of my vertical slider demo and made a quick little thing to demo this technique. Here's one way to do it.

 

See the Pen mdJjjvN by PointC (@PointC) on CodePen

 

My version plays to the various nav dots section rather than jumping straight to them, but you could certainly jump if you like. This is just a little demo that should get you started. Just my two cents. Happy tweening.

 

  • Like 4
Link to comment
Share on other sites

6 hours ago, PointC said:

Seems to me that this doesn't really need slides. I'd probably create a timeline with a bunch of labels and scrub it via mouse, arrow, scroll wheel etc.

 I actually thought about that, but I didn't think i would be able to re-create the smooth sliding motion from your slider, especially the draggable.

 

6 hours ago, PointC said:

 I just stripped a bunch of the unnecessary stuff out of my vertical slider demo and made a quick little thing to demo this technique. Here's one way to do

 

My version plays to the various nav dots section rather than jumping straight to them, but you could certainly jump if you like. This is just a little demo that should get you started. Just my two cents. Happy tweening.

 

Awesome. I appreciate it. This will definitely keep me busy for some days. 

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