acantoroBB

Hi, I have the same issue with my webpack 5 configuration, I'm using. gsap 3.11.4 and I don't have any problem in development mode but when I build my project, I have the same error. I added the line below and it's working now, I did not have this problem in other projets. gsap.core.globals("ScrollTrigger", ScrollTrigger); I already used this webpack configuration and I don't have any problem before. Does anyone have an idea what is the problem and how to fix it ? Thanks EDIT: Its seems that the problem came from TerserPlugin

Wow, it's seems to work well now. Thank you for your very fast reply.

Hello everyone, I'm using Gsap and ScrollTrigger Plugin for one of my projects and I met an issue when resizing the window. In this case I want to get the height and width of the main element of the animation ( in this example we are going to use an image) and of the window to get a ratio to set and animate the scale to cover the screen with the image. (The image is fullScreen at start and then Scaled down to be at center of our page ) So I made a function to calculate the ratio between the element and the window and apply it with a scale transform on our image element. The problem is whenever we resize the window, the ratio is updated with an event listener but unfortunately we can’t succeed to update it on the timeline. I see on other posts that to update a Timeline like this, the easiest way is to kill the timeline to rebuild it with new values to fit our needs, but in a case of resize it may be a painful payload of work for the website. Also sometimes when the page is refreshed, Scrolltrigger don’t position the element the way i expect, we can note that happens more frequently on Devices (mobile & tablet) So how could i make an animation Timeline which i can update on the resize without killing it every time, and without breaks ? The actual page with this animation already have lots of animations and it would be very nice to have an optimized way to do this. Thank you in advance for the help (and happy tweening).

Thank you, it seems to work, I really hate safari for this type of problem …

Hello I have some problems using SplitText plugin in safari browser in my project. There is like an overflow hidden effect caused by generated divs during the animation. I tried several solutions from other topics from the forum but no one seems to work. You can check the problem with the linked codepen project below : https://codepen.io/bappla/pen/XWMpRMR Thank you for your help.

Thank you, I didn't suppose this option would works. EDIT: Here is a exemple I found using .toArray() and .forEach() https://codepen.io/GreenSock/pen/GRjWxaJ?editors=0010

Hello, I have a question about Batch method in ScrollTrigger. I read the doc but I couldn't find where to animate child of current triggered element. In my example I'd like to animate "name" and "gender" div of my batched div ".item". Is there any method to make this ? I thought use gsap.utils.toArray, is it a good way ? Thank you. ScrollTrigger.batch(".item", { interval: .5, batchMax: 4, start: "top 75%", onEnter: batch => { //Instead of batch I'd like to animate children of triggered .item gsap.to(batch, { opacity: 1, scale: 1, duration: 1, ease: "power4.out", stagger: 0.25, }); }, });

I tried removing gsap from data and I added a setTimeout to this.marqueeScrollTrigger.refresh() and it seems to work. It's not a proper way do it but it's a good start to test where is the problem, I guess it's as you said maybe a problem with rendering and JS execution. Here is my code now : mounted() { let self = this; this.marqueeScrollTrigger = gsap.to(self.$refs.inner, { xPercent: -65, scrollTrigger: { trigger: self.$refs.marquee, start: "top bottom", end: "top top", scrub: 0, } }) setTimeout(function(){ self.marqueeScrollTrigger.scrollTrigger.refresh() }, 10); }, beforeDestroy(){ this.marqueeScrollTrigger.kill() }

Thank you for responding, despite I don't share any sandbox or codepen. I had use data to store my gsap instance during mount, kill it and set data to null it during the beforeDestroy event. data() { return { marqueeScrollTrigger: null, } }, methods: { scrollAnim() { this.marqueeScrollTrigger = gsap.to(this.$refs.inner, { xPercent: -65, scrollTrigger: { trigger: this.$refs.marquee, start: "top bottom", end: "top top", scrub: 0, //markers: true, //scroller: this.$el.parent, } }) }, }, mounted() { this.scrollAnim(); }, beforeDestroy(){ this.marqueeScrollTrigger.kill() //this.marqueeScrollTrigger.scrollTrigger.kill(true) this.marqueeScrollTrigger = null } I also thought maybe there is a problem with a dependency, but I don't have much and I can't see which can cause the issue. I'm stuck and I really don't know why it works on sandbox or blank project but not in this. "dependencies": { "@vue/cli": "^4.5.12", "core-js": "^3.6.5", "embla-carousel": "^4.3.2", "gsap": "file:gsap-bonus.tgz", "normalize.css": "^8.0.1", "vue": "^2.6.11", "vue-router": "^3.2.0" }, EDIT: I created a new project with those dependencies and devDependencies and it still works. EDIT2: I also browse some topics with same problem with other framework (i.e React) and I tried the .refresh() method on mounted event and it doesn't work too.

Hi, I'm new to use Scrolltrigger in SPA. For my project I'm using vue and vue-router, and I have some issues with Scrolltrigger when I navigate to another pages. The start and end values from my scrolltriggers are set to the height of the previous page, and it works only if I manually reload the page. I tried the ScrollTrigger.refresh() and ScrollTrigger.kill() methods on mounted and beforeDestroy Vue's lifecycle as recommended in the most common issues article, but it's not working (https://greensock.com/st-mistakes/#navigating-back). I made a sample in a sandbox project but I don't succeed to reproduce the error. Thank you for your help.