TELLO

I get the error with tl.reverse() when compiling with webpack-encore. I expected its something with the GSAP V (3.10.4)? Failed to compile with 1 errors 10:59:37 PM Module build failed: Module not found: "./assets/website/app.js" contains a reference to the file "core-js/modules/es.array.reverse.js". This file can not be found, please check it for typos or update it if the file got moved. Entrypoint app [big] 1.61 MiB (43.2 KiB) = runtime.js 14 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_gsap_ScrollTrigger_js-f96b38.js 1.57 MiB app.css 10.1 KiB app.js 14.7 KiB 1 auxiliary asset Entrypoint _tmp_copy 14 KiB (11.6 MiB) = runtime.js 8 auxiliary assets webpack compiled with 1 error

Hi all, i was using this way in older projects. Now I get error with reverse() my timeline on Scrolltrigger: const tl_hide_navi = gsap.timeline({paused: true}); tl_hide_navi .to('.naviTopLeft', {autoAlpha: 0, duration: 0.8}, 0) .to('.naviTopRight', {autoAlpha: 0, duration: 0.8}, 0) ; gsap.timeline({ scrollTrigger: { trigger: '.videoFrame', start: "top top", end: "center 50", scrub: true, markers: true, onEnter: () => tl_hide_navi.play(), onEnterBack: () => tl_hide_navi.play(), onLeave: () => tl_hide_navi.reverse(), onLeaveBack: () => tl_hide_navi.reverse(), } }) Any idea why I get with the .reverse() now error in webpack?

Hi all, how can i change with timeline the backgroundColor of the PIXI.Application? const app = new PIXI.Application({ backgroundColor: 0x1099bb, resizeTo: window }); THanks

I was writing not clear. Code sample is not possible with all the stuff I use. And as I was writing, simple projects working. Its not the code. I can make them total simple, just for the DIV to pin. I get only the marker. No pinning, no logs (if I try). ScrollTrigger.create({ trigger: '#content-referenzen-test', start: "top center", markers:true, pin: true }) I suggest the mix of plugins. My question was more if there is anything known. With PIXI, MotionPathPlugin, Random, Bootstrap or Swup in combination? I also used now the 3.8.0 - but still the problem. Otherwise I must start with a dummy side and add stepp by step my plugins to the time its not working anymore.

Hi all, I use ScrollTrigger in lot of projects. Now I use it in a new one with GSAP PixiPlugin and the ScrollTrigger will not work. The ScrollTrigger Script somehow not working. I get the Markers on the right position... but I don't get a pin of my DIV or start the animation of the Timeline or - If I do it to test, logs in my console. I also get NO error in webpack. My TestDIV will not pin. Also without calling the timeline. I have no idea.... const tl_referenz_filter = gsap.timeline({paused: true}); tl_referenz_filter .to('#content-referenzen-test', { autoAlpha: 0, duration: 1.2, ease: "power4.in" }, 0) ScrollTrigger.create({ trigger: '#content-referenzen-test', start: "top center", markers:true, pin: true, onEnter: () => tl_referenz_filter.play(), onLeaveBack: () => tl_referenz_filter.reverse(), })

Hi all, I want to make some products turning 360° with app. 30 pictures. And I love GSAP!!! Is there some samples or links to get ideas for such project with GSAP? THX TELLO

@os0wski Oh I did a big mistake. In your timeline i found it. I forgot my later timeline, where I scale again. So I can set and scale like hell before without result. ?

Hi all, I use the PIXI Plugin for some BCG pictures. How can I change the size of the image? I use it like this... but it means only the wrapper is "responsive". But the picture/image themselves is not smaller. So on small devices not nice... wrapper.width = app.screen.width; wrapper.height = app.screen.height; wrapper.append(app.view); image = PIXI.Sprite.from(bcg); image.anchor.set(0.5); image.x = app.screen.width / 2; image.y = app.screen.height / 2; image.alpha = 0; $(window).resize(function () { image.x = app.screen.width / 2; image.y = app.screen.height / 2; }); I also tried to change as test the size of the picture direct like this: image.width = 10; image.height = 20; // or image.scale.x = 0.5; image.scale.y = 0.5; But no difference. Any help?

Hi all, I guess its simple what I need. I change with my timeline the color from one element via variable color_01. .to(hex_06_gradiant_0, {attr:{offset:'0'},stopColor: color_01, ease: 'power4.out'}, 0) If I call the timeline again with .play(), I want to change the value of color_01. I expected its possible to send the new color with play() like: function changeColor() { let color_01 = offset_02_01; let color_02 = offset_02_02; tl_menu_color.play(color_01, color_02); } But its not working. What is the approach to do this? PS: I found solution to put the whole timeline in a function. THX

@ZachSaucier Sorry for the misunderstanding. I changed the parallax div to a frame position: relativ, overflow: hidden and inside a bigger one absolute, what I move now. So it works without any spacing. I guess it was only my primitiv way to start doing it

I move just a relative element. So the way it moves faster, it creates a space. Guess i must make it absolute as a bigger picture and overflow hide in a relative container.

Hi ZachSaucier, if I have 2 div and I move the top faster up to the top of viewport. gsap.to(first-div, { yPercent: -20, ease: "none", scrollTrigger: { trigger: first-div, toggleActions: "restart pause reverse pause", start: "center center", scrub: true } }) Result = the next div will move normal speed of the site. There will go a cap bigger and bigger to the second div. Is there a way to fix this in the script? Like when you pin, you get cap too and you can use the pinSpacing: false. Just asking if there is some magic code for this case too?

Hi all, if I move a div with ScrollTrigger faster up. There will be space to the following div. Is there a way - like the pinSpacing: false - to get this space closed? Or must I create a container and move them too to fix this space? Thanks TELLO

THX!

@ZachSaucier by the way... To add a var was my first idea. But I was not able to do this. How can I add this additional to my line, where I have my function already? onEnter: () => tl_navi_mini_ani.play(), myvar = true,