LPIP

Hi , I am creating an interactive image gallery with image zoom functionality depending on mouse proximity to image. I have created a timeline for each image and using the progress function to update the image scale on mousemove. There is also a tween on the container which moves the container around. The duration for all animations is 1s , so the easing on the container tween is smooth and takes 1s to update but the progress function is tied directly to the mouse position so there is no easing and the image scale animation is not smooth . my question is how can I add the 1s easing / duration on the timeline progress function so that the image scale animation has the same easing / duration as the container animation. Does that make sense ? cheers from CHRIS https://codepen.io/chrispetro/pen/rNyWRrR

Hi I am working on a project that uses Pjax for seamless page navigation, its html5 pushstate based page navigation. The whole page isn't reloaded but content container is removed and replaced on each page change. I have also been using GSAP and ScrollTrigger on this with callbacks on functions. Basically my problem is that when I change page the ScrollTrigger triggers and GSAP tweens and callbacks seem to remain in place and cause null content warnings and other errors on my site such as not being able to repeat the same animation on multiple pages. Here is a basic example of the type of thing it is doing, its not that important what I am doing , I have a whole bunch of slides on the page doing stuff and it works. Basically each time the page changes the javascript to initialise the gsap should be destroyed and completely redone . As in I am writing over the same vars each time and the old introSlider, intro, slides, progressMeter etc should be completely refreshed each page. let introSlider = () => { let intro = document.querySelector('.intro-slider'); let slides = intro.querySelectorAll('.slide'); let progressMeter = intro.querySelector('.slide-progress-meter'); for (let i=0; i < slides.length; i++) { let slide = slides[i]; let index = i; var tween = gsap.fromTo(slide, { autoAlpha: '0', }, { autoAlpha: '1', scrollTrigger: { scrub: true, pin: false, start: 'top top', end: window.innerHeight * index, }, }); var tweeen = gsap.to('.slide-progress-meter', { scrollTrigger: { scrub: true, pin: false, start: 'top top', end: window.innerHeight * index, }, strokeDasharray: '100, 100', ease: 'none', onStart: () => { progressMeter.innerHTML = index+1; }, onReverseComplete: () => { progressMeter.innerHTML = index; }, }); } } // do introSlider introSlider(); // triggered on page change send document.addEventListener('pjax:send', () => { gsap.killTweensOf('*'); }); There is a function called before the page changes which is the perfect time to remove old functions. I have tried Kill tweens of * but it messes everything up , and seems to prevent any future tweens from happening that use the same functions. its weird if I do var tween = gsap ... then later on page change if I do console.log(tweeen); it shows the tween object but if I do tweeen.clear(); it causes an error. basically my question is how do I kill all tweens and callbacks on page change , so that the same functions can be reused on next pages but are completely unrelated to each other. I hope its a simple fix , cheers,

Hi! Ok so I have created a looped animation with multiple timeline items that are linked to a master timeline. Each item starts below the bottom of the screen and then moves up to past the top of the screen and onRepeat the X position of the item is randomly changed. I have used a mouse wheel event to progress the master timeline on scroll and its working well. Each sub timeline is added to the master timeline at an equally spaced position . Each item is set so that when it finishes it waits a while before repeating. I have set the repeatDelay to a similar value to the duration so all the elements stick around their relative position. I would ultimately like 3-4 items in the window at a time with the bottom overlapping the top(no gap). if I have around 7-8 items this works well as you can see in the first codepen example , but as I increase the number of elements the page becomes cluttered with items. Ideally you want to view this fullscreen on a laptop to get the idea properly. here is another codepen example with around 30 items , you can notice that the page is cluttered with items. the animation is basically fine but I need it to work with 90 items . my questions re this are: 1. how do I increase the space between items so there are only 3-4 items on the page at a time but dynamically depending on how many items (could be between 10 and 90) , with the start of the first items and end of the last items overlapping (no gap in between start and end of timelines). 2. how do change the duration (speed of an item to go from the bottom to the top) slightly on each repeat. I have a function that gets a random number between 20 - 30 for this which is basically what I want but I want it to change each iteration of the animation for each Item. 3. Third question unrelated : how do I embed codepens on the gsap forum to make my post easier to understand? Last time I posted a question on here the codepen didn't embed properly and no one viewed or interacted with it. please let me know if I need to explain anything in further detail! Thanks! from CHRIS

Hey Jack, thanks for the reply ! I think the problem that I had in the codepen I sent you was solved by changing the pin start parameter to 'top top', now when I resize it seems to correctly calculate the dimensions. I think part of what I what I was asking is like whether it's ok to not use actual trigger elements but instead just set dimensions for start and end based on container heights and offsets , and it seems to work ok. with an animation that is a whole bunch of elements stacked on top of each other , how else would you do it ? have some empty divs after the element to scroll past ? I will re-read more thoroughly the documentation , and watch the tutorials to see if I can find any more info. Thanks for the assistance and thanks to GSAP for releasing this plugin. RIP Scrollmagic.

Hi! I have created a scroll based image gallery using ScrollTrigger Plugin, please check the codepen example. https://codepen.io/chrispetro/pen/ZEQQwvo I am using a for loop to calculate the trigger start and end positions based on the height of each slide. It occurred to me that you can just use dimensions and not use a actual trigger elements which would take up unnecessary space on the page and push following elements down. essentially all the elements are stacked on top of each other position absolute. Not sure if this is how it was intended to be used or not ? This system seems to work well if there is only one instance of the page, if you resize your browser the dimensions are calculated normally, but if there are 2 or more instances of the scroll image gallery on one page it doesn't respond well to resize. the images slide change part recalculates fine but I was having some trouble with the pinning part of it , I guess my question is how do I make this so it is responsive on resize. I want to ideally have 2- 4 of these image galleries on each page they will all be height:100vh - 50px, and width:100vw. also occasionally I have noticed that the dimensions are calculated incorrectly on load , not sure why this is . . Also how do I make a function to get the current slide number and replace the number in the slide-progress-number , I tried onToggle: () => { console.log(i); } but it makes an error . cheers, kind regards, CHRIS