kristoffer

Hi
 

Is it possible to specify an absolute time for the ease itself? For instance if I want the ease for only the first 1 second independent on the total duration of the tween? 

Thanks,

Kristoffer

9 hours ago, ZachSaucier said:

Hey kristoffer,

 

Unfortunately it looks like the challenges you're facing are more related to generic logic issues that are unrelated to GSAP. As much as we love helping people around here, we just don't have the resources to provide free consulting services for things that don't directly relate to GSAP. Is there anything GSAP-specific that I can help you with? If so, I'm happy to help.

Hi Zach, thanks for your reply. That makes sense. I though maybe the issue could be related to how gsap/autoAlpha was updating the screen rendering. If that's not the case then I assume it has more to do with how the video element behaves.

Trying to do a video scroller that instead of using scroll position to update video.currentTime is using scroll speed to update video.playbackRate.  Have two videos, one forward and one in reverse, and depending on scroll direction it switches between them using 'autoAlpha'. See Codepen below. 

Results is smoother using playbackRate, BUT the problem I'm facing is the transition between forward and reverse videos, especially at high scroll speed. Even though video.currentTime is updated continuously to prepare for switch in direction, the last frame viewed on the video that is being switched from becomes visible for 50-250ms. Example: Scroll forward 5000px, then reverse 3000px, then when switching back to forward scroll, now at position 2000px, the last seen video-forward frame that was seen at 5000px now become visible for 50-250ms.  I've tried in Chrome, Edge, and Firefox, same issue in all.

Not sure why the video frame shown on screen after autoAlpha=1 does not match the frame at currentTime. Any idea why I'm seeing this, and is there a way to mitigate it?

I've used code from OSUblake's scroller demos :

and Ollie's "Scrolling controls for HTML5 video": 

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

15 hours ago, Shrug ¯\_(ツ)_/¯ said:

Here are some old (2013) posts that have a scroll snap of sorts, they may have some logic to review.

 

https://greensock.com/forums/topic/8053-scrolltop-in-greensock/?do=findComment&comment=30899

https://greensock.com/forums/topic/7652-snap-by-scrollto-to-the-nearest-divpoint-superscrollama/?do=findComment&comment=29159

 

Very nice! Thank you.

1 hour ago, ZachSaucier said:

By "how the Draggable does the scroll motion and page-snapping" do you mean how if you start dragging it will partially go to the next slide and if you don't go far enough snap back into place? 

 

If so, the answer is kind of. It's doable but not the cleanest and may require some tweaking. See this post:

 

It might be easier to recreate the same sort of functionality without using Draggable directly, just moving the scroll position based on velocity, acceleration, and snap values.

Thanks for your reply. So I guess it has do be done the "hard way", no easy shortcut through the Draggable plugin. Ok, I'll try to see if i can use some ideas from that post.

Thanks,

Kristoffer 

I'm using the vertical full-screen slider from PointC (see codepen). I really like how the Draggable does the scroll motion and page-snapping. I wonder if this can be extended to using two-finger scroll on a trackpad and/or using mouse-wheel scroll? OR if it is somehow possible to "trick" the mousewheel / trackpad scroll signal into being a click-and-drag motion instead?

I did search the forums, and I found this post from Sahil, but hoping maybe there is an easier (and newer) way to do it:

Thanks,

Kristoffer

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

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. 

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.

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

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.

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. 

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