Jump to content
Search Community

Combining my tween with scroll snap

D.Cus test
Moderator Tag

Recommended Posts

Trying to create an effect of moving across a canvas or journey however I need the to tie each movement function into some sort of scroll snap however I can't seem to work out how to create this.

Heres a pen with the effect and current function I have, any help with this would be great: 

 

Thanks in advance

See the Pen gOLwQNq by darren-ignition (@darren-ignition) on CodePen

Link to comment
Share on other sites

I have looked over the scrollTrigger docs but can't seem understand how to apply this to what I am trying to achieve. Also a lot of the examples shown tend to scrub things where as I am trying to snap to each focus point. I have added some refinement to my pen it is almost like I need to run something like this:

gsap.to($focus, {
	scrollTrigger: {
    	trigger: $canvas,
        snap: {
            snapTo: $focus, 
        }
    }
});

but that does nothing to my pen so still struggling to get this working, what I am doing wrong?

See the Pen PobbNKW?editors=1010 by darren-ignition (@darren-ignition) on CodePen


 

Link to comment
Share on other sites

Thanks for the help so far. I think this a small step in the right direction however, the effect I am looking for is to snap to the closest focus (i.e .focus centralised) point triggered on scroll up or scroll down while in the $canvas . I have tried something like this but it does nothing to my pen. Although I think setting the labels at the start of the foreach is correct.
 

var tl = gsap.timeline({
  defaults: { duration: 2, ease: "power4.inOut" },
  scrollTrigger: {
    trigger: $canvas,
    snap: "labels" // I added this cause I want to snap to each of the labels set below
  }
});

$focus.each(function (i) {
  tl.addLabel("focus" + i)
    .to($(window), { scrollTo: { y: focusObj[i].y } })
    .to($canvas, { x: focusObj[i].x }, "focus" + i);
});

Also I would have thought adding the scrollTrigger into my timeline would have stopped the automatic triggering of the animation but it still automatically plays

See the Pen PobbNKW?editors=1010 by darren-ignition (@darren-ignition) on CodePen

Link to comment
Share on other sites

1 hour ago, D.Cus said:

I would have thought adding the scrollTrigger into my timeline would have stopped the automatic triggering of the animation but it still automatically plays

That's because by default a ScrollTrigger will play the entire timeline. If you use a scrub then it will pair the progress of the timeline to the scroll position.

 

Another part of the issue is the start and end positions of your ScrollTrigger. By default they are start: "top bottom" and end: "bottom top" which is not what you want in this situation. I highly recommend that you go through the ScrollTrigger documentation and video thoroughly as getting a better understanding of how ScrollTrigger works will make your development process a lot easier and faster :) 

 

The last issue is the fact that you have a scrollTo part of your timeline. That doesn't make much sense because both those tweens and the ScrollTrigger will try to control the scroll position. That's no good :) Instead, since you're using scrub, you should just place the label and tween at the correct ratio (progress) of where it needs to be. So if your second section is 1/4 of the way down your canvas, you need to make sure the label for that section is at the 1/4th progress point of the total timeline duration. For more information, check out the relevant section of the ScrollTrigger docs.

 

The basic concept is: Create your timeline as you need it to be (animating between each section as you'd like but not actually affecting the scroll position, with labels at each stopping point including the start and end if necessary), then attach it to a ScrollTrigger with the correct trigger, start, end, and scrub values to create the effect that you need.

 

Here's a basic demo that does not have custom positions of each section in the timeline:

See the Pen OJbbmKO?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

Ok @ZachSaucier & @mikel with help on this post I have managed to do this...

See the Pen OJbmaZp?editors=1010 by darren-ignition (@darren-ignition) on CodePen



However I think my approach to this is wrong as I want the behaviour to instantly snap to next or previous label. I think the usability will be an issue if the user scrolls don slightly and it the movement just snaps back or if the user scrolls too much and then just get taken to the end missing all the text.

Is that any way to integrate my animation into the method used on this in this pen

See the Pen NWxNEwY by GreenSock (@GreenSock) 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...