D.Cus

Looking to try tie in the use of velocity on update but not sure how to put back the timelines timeScale after scrolling has finished. The idea around the concept is to have the images scroll at a constant speed until the user scrolls down and once the user does scroll it should tie into the velocity from the on update to speed up the scrolling on the x axis as the user scrolls down

@Jloafs I stumbled across this thread as I was having a similar issue. So what solved the issue for me was having an init() function run on both page load and the after hook. In this init function give each scrollTrigger an id relative to the section or functionality store those ids in an array then using the before hook loop through each id using `ScrollTrigger.getById(id)` and then run the kill() function Not tested the below code but should help understand what fixed my issue gsap.registerPlugin(ScrollTrigger); const prefix = 'className'; let triggerIDs; init(); function init() { const sections = document.querySelectorAll('sections'); triggerIDs = []; sections.forEach(function(element, index) { const ID = prefix + '__' + index; const tl = gsap.timeline({ scrollTrigger: { id: ID, markers: true, trigger: element, }, }) triggerIDs.push(ID) }); } barba.hooks.beforeLeave((data) => { triggerIDs.forEach(function(id) { ScrollTrigger.getById(id).kill(); }); }); barba.hooks.after((data) => { init(); });

@GreenSock thanks for the head ups on the static.convertCoordinates() function I will defiantly try and use this to match each of the markers for each section. @Cassie With regards to the resize issue turns out it was my fault and a quick fix for my pen was to zero the svg overlay before resetting the `startEndArr` variable, I think me using .getBoundingClientRect() does not take into account the transform applied at that time. I think maybe using the motionPathPlugin functions may make things more streamline. Anyway here is my updated code with the quick fix on resize: `window.addEventListener("resize", function () { gsap.set(svg, {x: 0, y:0}) startEndArr = getStartEnd(); ScrollTrigger.refresh(); });` https://codepen.io/darren-ignition/pen/VwMdmPJ

I can see the values are updating just not passing through or updating the timeline on resize. The logic behind this pen was to match the position each marker (one from within the svg container and the other within each of the sections) as you scroll down the page. Aesthetically it does what it is desired until the user resizes the browser. I am sure it is something relatively simple but just can't wrap my head around what it is

@Cassie Thanks for the minimised demo, seems applying backgroundColour change to the tween does work when a resize event is applied however just doesn't seem to make changes to my x and y values in the tween in the fromTo here: `.fromTo(svg, { x: () => Math.round(startEndArr[index].startX), y: () => Math.round(startEndArr[index].startY), }, { x: () => Math.round(startEndArr[index].endX), y: () => Math.round(startEndArr[index].endY) }, 0 )` https://codepen.io/darren-ignition/pen/MWEGZOb

apologises for the lack of clarity the only values I need to refresh in the pen are in `startEndArr' variable and at the bottom on the js I do reset them within a resize event listener.

Thanks for the info using a different approach I have done it like this but the values still don't seem to refresh on resize: https://codepen.io/darren-ignition/pen/vYejzzP

Here is my pen I am having trouble updating the transform values on resize, I have used `invalidateOnRefresh` which I thought would work however it seems to do nothing to my pen what am I doing wrong Thanks in advance

How do I update the end value in this scrollTrigger when the browser does a resize. I have tried doing a resize event to fire ScrollTrigger.refresh(); but this seems to do nothing and running the scrollTrigger within a resize just creates multiple scrollTrigger instances Thanks in advance

Sort this one myself, changing the start point sorted my issues out

I want to add some multiple nested animations into one scroll trigger however I feel I am doing some wrong. I can see that the nested animations work when I comment out the scroll-trigger code however as soon as I add the scroll-trigger into the master_tl it does not fire the master_tl. Thanks in advance

@PointC thanks for the information and approach, really helpful for what I am trying achieve

Created a load of hover points in this section that I want to switch out the text on hover with an animation, this works however when you hover between them quickly it seems to break how do stop the overlapping of signpost text and hover text? Thanks in advance

I did think it may have been me just trying to get a better understanding, thanks for the explanation

In this pen I have 3 sections and want the first section to load the animation by using "top top" is the scrollTrigger start but it seems to not load in the first section animation unless I add start: "-1 top" what I am doing wrong this can't be normal behaviour for the plugin. I feel like it must be me doing something wrong here

I have made some amends to a demo I found of a sticky header. I was trying to add a class when the user is at the top of the browser in order to blend the header into a hero or something. Is what I have done the most efficient way to do this? Also is there some way of delaying the show and hide classes to avoid the flash of red on scroll down?

Ok @ZachSaucier & @mikel with help on this post I have managed to do this... https://codepen.io/darren-ignition/pen/OJbmaZp?editors=1010 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 : https://codepen.io/GreenSock/pen/NWxNEwY

@elegantseagulls If .to will work when incorporating scrollTigger as well then that is fine. I just find it very strange that it will console log the value I need but not set in in the animation

Why is when I use the following within a foreach the animation starts from the top on every loop. The desired effect I want is to on each to use the current position. {y: gsap.getProperty('svg', 'y')}

Most of the way there, looked at the panel example on here ad based the logic around that, id there any way I can make this a bit more smooth seems a little glitchy? https://codepen.io/darren-ignition/pen/KKNNWVd

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 https://codepen.io/darren-ignition/pen/PobbNKW?editors=1010

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? https://codepen.io/darren-ignition/pen/PobbNKW?editors=1010

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: https://codepen.io/darren-ignition/pen/gOLwQNq Thanks in advance

@mikel @ZachSaucier @elegantseagulls Thanks for the responses everything so far has been super helpful, I have done some another re hash taking influence from all comments: https://codepen.io/darren-ignition/pen/KKNdaLR?editors=1111 Couple of questions why does my snap into position on first scroll, it doesn't really make the process very smooth? Also how would I get the dot to stick at the end of the scrub I have tried a couple of onComplete options within the spark tween but it just fires on load? And finally is this sort of thing very memory intense my fans seem to be kicking when I start playing with things within the pen?

I have created a pen so a ball follows a motion path and removes the line as the ball tracks the path, however the next step is to give the impression that the viewport sticks with the ball at the same point on the screen by either applying translate x and y to either the container or svg. This is proving rather hard to understand the logic behind this and also to achieve on my pen. I have seen a pen which does a similar thing but I really can't understand the logic behind this. https://codepen.io/darren-ignition/pen/poNjygv?editors=1111