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