Page Tailoring

I can help, can You send me more details by DM?

https://codepen.io/bartek-stawiarski/pen/qBJGLVg?editors=1010

Hi, I think i looking of solution of this problem some time now. I was Just thinking to post it. There is good and simple pattern to have ScrollTrigger with continuous snapping. If you mix it with your code it should work But I don't think is way to mix it with SmoothScroll to use LAG EFFECT. ?‍♂️ What I looking to use it with text Pattern for ScrollTrigger with continuous snapping: https://codepen.io/bartek-stawiarski/pen/abRrQgq?editors=1010

Sharing a solution that made me forget my SSR issues in nuxt3 with gsap.

Is it nuxt with SSR? I have problems when moved from nuxt 2 to 3. Now I'm moving all gsap to composables and loadding them onMounted, nothing before. <template> <div ref="dom">....</div> </template> <script setup lang="ts"> const dom = ref(null) const ctx = ref(null) onMounted(() => { const { initSomeScrolltrigger } = useScrollers() initSomeScrolltrigger(dom.value, ctx) }) onUnmounted(() => { const { cleanGsapContext } = useBasicAnimations() cleanGsapContext(ctx) }) </script> const initSomeScrolltriger = (scope, context) => { context.value = gsap.matchMedia() context.value.add(matchMediaConditions, (ctx) => { const { isMobile } = ctx.conditions const s = gsap.utils.selector(scope) (...) }) } const cleanGsapContext = (ctx) => ctx.value.revert()

I just developing web page with ScrollTrigger, and want to add Observe. When I use ScrollTrigger.observe there is no way to catch it and kill it. gsap.getById and ScrollTrigger.getById dosn't work. I think it would be logical to ScrollTrigger.getById would work for it. For exempel to kill it ? Yust idea ? happy tweening

Hi, i'm https://pagetailoring.com/

@marcodellabate can you post solution?

And ALL problems solved! https://greensock.com/docs/v3/Plugins/ScrollTrigger It's look great, thank you GSAP Team, I'm going to test it

I know, problem is that i need finish i 5h from now ?

I know that demo is best, but it takes time especially with such an extensive project. Thank You for help.

I have done this like this: slideAnim[1].timeScale(2).play(); setTimeout(() => {slideAnim[2].timeScale(2).play();}, slideAnim[1].duration() * 0.5 * 1000);

(same person, on to accounts :) Is complicated, it is quite long code. It is page o swiper and I wrote separate animations to change all slide. When i going forward I'm using slideAnim[x].play(), when going back slideAnim[x].reverse(). I have 13 steps. It's working perfect when I moving one step, between slides. Now I'm traying make animations for step n slides. I have some basic function for this: function handleAnimations(previusSlide, activeSlide) { console.log('f: handleAnimations'); if (activeSlide > previusSlide) { console.log('active -> ' + activeSlide); console.log('previus -> ' + previusSlide); if (activeSlide - previusSlide === 1) { slideAnim[activeSlide].play(); mySwiper.allowSlideNext = false; setTimeout(() => { mySwiper.allowSlideNext = true; previusTransitionTime = nextTransitionTime; nextTransitionTime = slideAnim[activeSlide].duration() * 1000 + 100; console.log(`transition ${previusSlide} -> ${activeSlide} took ${nextTransitionTime / 1000}s`); }, nextTransitionTime); } else { /// work evemple 0 -> 2 if ((activeSlide === 2) && (previusSlide === 0)) { console.log('test handling'); let master = gsap.timeline(); master.add(slideAnim[1], 0).add(slideAnim[2], 0); console.log(master); console.log(slideAnim[1]); master.play(); } else console.log('handle me down'); } } else { console.log(previusSlide - activeSlide); if (previusSlide - activeSlide === 1) { slideAnim[previusSlide].reverse(); mySwiper.allowSlidePrev = false; setTimeout(() => { mySwiper.allowSlidePrev = true; nextTransitionTime = previusTransitionTime; previusTransitionTime = slideAnim[previusSlide].duration() * 1000 + 100; console.log(`transition ${activeSlide} -> ${previusSlide} took ${previusTransitionTime / 1000}s`); }, previusTransitionTime); } else { console.log('handle me up'); } } } (there is to blocking swiper for time of animations) from: console.log(master); console.log(slideAnim[1]); I have: So in function console.log(slideAnim[1]) is visible and it have 1.7s (second 0.9) and master animation have duration 0. It's starts and finish at 17.611? <- that strange.

Hi, how to do it in gsap3. this don`t work var tl1 = gsap.timeline(); tl1.to(...); //add whatever animations. var tl2 = gsap.timeline(); tl2.to(...); //add whatever animations var tl3 = gsap.timeline(); tl3.to(...); //add whatever animations; var master = gsap.timeline(); master.add(tl1).add(tl2).add(tl3); //now you can control everything with master! //jump to the middle of the entire sequence, for example master.progress(0.5); i have: const longTime = .6, time = .3, shortTime = .15, longOverlap = '-=0.6', overlap = '-=0.3', shotOverlap = '-=0.15', easeingInOut = 'circ.easeInOut', easeingOut = 'circ.easeOut', easeingIn = 'circ.easeIn', popUpEase = 'elastic.out(1.5, 1)' ; slideAnim[1] = gsap .timeline() // slider no.1 .to('.tv', {duration: longTime, y: '-=55vh', ease: easeingInOut}) .to('.header', {duration: longTime, y: '-=102%', opacity:0, ease: easeingInOut}, overlap) .to('.container.-hero', {duration: longTime, opacity: 0, ease: easeingInOut}, 0) .set('.swiper-wrapper', {zIndex:'6'}) .to('.darknes', {duration: longTime, opacity:.4 ,ease: easeingInOut}) .fromTo('.container.-chatbot', {duration:time, opacity:0 ,ease: easeingInOut}, {opacity:1}, overlap) .pause(); slideAnim[2] = gsap .timeline() // slider no.1 .to('.container.-chatbot', {duration:time, opacity:0 , ease: easeingInOut}) .fromTo('.container.-ready', {duration:time, opacity:0 ,ease: easeingInOut}, {opacity:1}) .pause(); let master = gsap.timeline(); master.add(slideAnim[1]).add(slideAnim[2]); master.play(); on console.log(master) i have: Timeline {vars: {…}, _tDur: 0, _dur: 0, _delay: 0, _repeat: 0, …} Please, help me

Hi, all I resigned from "animations.gsap" ScrollMagic plugin and handle this like that: import { gsap } from "gsap"; import ScrollMagic from 'ScrollMagic'; const controller = new ScrollMagic.Controller(); const easeInOut = 'circ.easeInOut'; const time = .5; const menuAnim = gsap.timeline({defaults:{ease: easeInOut, duration: time}}) .to('nav', {y: '-100%'}) .to('#logo', {opacity: 1}, "-=0.4") .to('.main-nav', {opacity: 1}, "-=0.4") ; menuAnim.pause(); new ScrollMagic.Scene({ triggerElement: '#home', duration:0, triggerHook: .85 }) .on("enter", function (e) { menuAnim.play(); }) .on("leave", function (e) { menuAnim.reverse(); }) .addTo(controller);