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

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":

Very nice! Thank you.

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

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. Awesome. I appreciate it. This will definitely keep me busy for some days.

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.

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(); https://codepen.io/krispen/pen/wvaXJBd

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.

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