AllenIVe

Hello, I have this timeline, I can't start the last tween from text3 instead of textone, what am I doing wrong?

@Rodrigo Thanks for your reply, i have updated the codepen https://codepen.io/IveSix/pen/oNJQXve This is the staging site > https://innovando.oneupstudio.it/chi-siamo/ So when the last panel > about__sostenibilita__video is pinned i want to create new animation, like scaling the img etc etc.

what am I doing wrong? in addition to sliding the panels, in the last one when it is pinned I would also need to animate the image and other aspects. I would need the last section to remain pinned more and insert a timeline to fade the image Thanks

@mvaneijgen Solved, the problem was > alignOrigin: [0, 0]

thanks @mvaneijgen for the advice, now I managed to get it working well. I have another problem, the svg has a transform matrix by default <circle class="ball ball00" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 852 125)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball01" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 852 125)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball02" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 964 195)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball03" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1052 300)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball04" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1098 422)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball05" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1098 566)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball06" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1052 692)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball07" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 964 798)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> <circle class="ball ball08" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 852 868)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/> When the page renders these are different <circle class="ball ball00" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,5.5,322.314)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="opacity: 1; visibility: inherit; translate: none; rotate: none; scale: none; transform-origin: 0px 0px;" data-svg-origin="2 2"></circle> <circle class="ball ball01" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,806,125)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball02" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,918,195)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball03" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1006,300)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball04" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1052,422)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball05" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1052,566)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball06" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1006,692)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball07" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,918,798)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> <circle class="ball ball08" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,806,868)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle> my code doesn't act on that specification, what could it be? gsap.defaults({ ease: "none" }); ScrollTrigger.defaults({ // markers: true }); // gsap.set(".ball", { xPercent:0, yPercent: 0 }); var tl = gsap .timeline({ defaults: { duration: 0.3, // autoAlpha: 1, transformOrigin: "center", ease: "elastic(2.5, 1)" } }) .from(".ball01, .text01", { opacity: 0 }, 0.31) .from(".ball02, .text02", { opacity: 0 }, 0.37) .from(".ball03, .text03", { opacity: 0 }, 0.42) .from(".ball04, .text04", { opacity: 0 }, 0.47) .from(".ball05, .text05", { opacity: 0 }, 0.53) .from(".ball06, .text06", { opacity: 0 }, 0.56) .from(".ball07, .text07", { opacity: 0 }, 0.61) .from(".ball08, .text08", { opacity: 0 }, 0.63); var action = gsap .timeline({ defaults: { duration: 1 }, scrollTrigger: { trigger: ".wrapper svg", scroller: ".scroll__stage", scrub: true, start: "center center", end: "center top", preventOverlaps: true, anticipatePin: 1, pin: ".wrapper " } }) .to(".ball00", { duration: 1, autoAlpha: 1 }) .from(".theLine", { drawSVG: 0 }, 0) .to( ".ball00", { motionPath: { path: ".theLine", alignOrigin: [0, 0] } }, 0 ) .add(tl, 0); Thanks

how to position it at right 0 with height 100vh?

Hi guys, I'm trying to solve this animation, I started from this pen https://codepen.io/delwinh/pen/OJMRYbd and I'm integrating with my svg and a pinned section. At the moment the content is not pinned in the center, furthermore the draw and activation of the bullet points is not synchronous.

Hello i have the same issue on saithia.oneupstudio.it ScrollTrigger 3.12.2 ScrollSmoother 3.12.2 all the animations are busted, testing from browser mobile mode it works perfectly. On devices both safari and chrome everything is broken, jump, the pinned sections are random

Resolved

Hello everyone, i'm working on a new project, one of the animation i developed is like the codepen https://codepen.io/IveSix/pen/wvQbqdj While within my project if I target the same element in a timeline only one action is performed. In the case of the codepen I have the following situation https://saithia.oneupstudio.it/ I can't figure out what it could be

Hey Guys, I'am new on scrollsmother, is there any possibility to use the sticky function like on scroll locomotives? <div class="sticky_div" data-scroll="" data-scroll-sticky="" data-scroll-target="#home__secondo_blocco_fixed" data-events="scroll"> <div class="title-2"> <h2>Is indecisiveness<br> stopping your<br> growth?</h2> </div> </div> Thanks,

Hello guys, we are working on a new project, but we have a big problem on mobile. We use both scrolltrigger and locomotives scroll, on mobile once the user stops scrolling he is sent back to the top of the page. I can't understand what the problem is, we have entered several console logs when refreshing locomotives and also scrolltriggers.. Can anyone give us a hand? I think the problem was here locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(".site", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; } }); If i wrap this inside a if ($(window).width() >= 768) { media query, all works fine, but i need a clean solution. http://rambl.oneupstudio.it/

Hello guys, I am developing a sit with different transition and barba js, this error often happens after a page transition, but I can't understand in which part of the code as it doesn't give me any reference to my scripts What could it depend on? ScrollTrigger.js?ver=5.6:605 Uncaught TypeError: Cannot read property 'splice' of undefined at Tween.Se.refresh (ScrollTrigger.js?ver=5.6:605) at _callback (twennmax.js?ver=5.6:10) at _renderZeroDurationTween (twennmax.js?ver=5.6:10) at Tween.render (twennmax.js?ver=5.6:10) at Timeline.render (twennmax.js?ver=5.6:10) at ea (twennmax.js?ver=5.6:10) at updateRoot (twennmax.js?ver=5.6:10) at twennmax.js?ver=5.6:10 at Array.forEach (<anonymous>) at kk (twennmax.js?ver=5.6:10)

i just follow this example > https://codepen.io/ihatetomatoes/pen/NWNaxwj

Thanks for the fast reply, this works for the markets, but toggle enable doesn't work too. Trigger gives the enable class on all elements together and remove it on the same times on all elements