jordanklaers

I just made the properties and methods accessible through a mixin in Vue. I will double check the configuration thank you

so I updated to this code: const rule = this.$data._cssRulePlugin.getRule('#work:after'); const hoverScale = this.$data._gsap.to(rule, { cssRule: { left: 100 }, duration: 1, ease: "power2.inOut", stagger: 0.5, repeat: -1, yoyo: true }); this.$el.addEventListener('mouseenter', hoverScale.play); this.$el.addEventListener('mouseleave', hoverScale.reverse); and I get the unspecified error as mentioned above. it still working in chrome though. I also changed the arrow functions (I had bable in my setup so that wasnt the issue but I changed anyways)

I suspect this may be an issue with the way my project is setup but honestly I have so little information to base that off of. I see how to implement these two plugins from this codepen: https://codepen.io/jamiejefferson/pen/ibHAt and I was able to export it and run it in IE to prove the syntax works in IE. I have tried to mimic that exact syntax (as shown in the commented out code) as well as an approach slightly different, that implements the animation I am intending to use. const rule = this.$data._cssRulePlugin.getRule('#work:after'); const tl = new this.$data._gsap.TimelineMax({ paused: true, duration: 0.3 }); const hoverScale = tl.to(rule, { cssRule: { height: '16.25rem', width: '24rem' } }); this.$el.addEventListener('mouseenter', () => hoverScale.play()); this.$el.addEventListener('mouseleave', () => hoverScale.reverse()); // const testTL = new this.$data._gsap.TimelineMax({ repeat: -1, yoyo: true }); // testTL.add(new this.$data._gsap.TweenMax(rule, 1, { // cssRule: { // left: 100 // } // }, 0)); Both work in Chrome but not IE. The only information I can get around this issue is that, if I pass 'left: 100'' to the cssRule object, in IE I will see the error: "unspecified error" pointing at the line ss[style[i]] ... (from within app.bundle.js from the webpack build) render: function render(ratio, data) { var pt = data._pt, style = data.style, ss = data.ss, i; while (pt) { pt.r(ratio, pt.d); pt = pt._next; } i = style.length; while (--i > -1) { ss[style[i]] = style[style[i]]; } }, Honestly im just not sure what to test or look at considering I have also matched the setup used in the codepen and even that didnt work. I can show the configuration I have for registering the plugins and how I made the gsap methods and properties accessible if there might be any value there.

I just laughed out loud at the ridiculousness of my oversight. Scrub with a number is literally exactly what I was looking for. Thats embarrassing. I even ended up implementing a solution similar to the one I was looking at from that site. Inside the mounted function in my vue app I had this code: (didnt think I needed to add to a codepen since its convoluted and your suggestion accomplishes the same thing easier) const proxy = { value: 0 }; this.animationTimelines = [ new gsap.TimelineMax({ paused: true, ease: gsap.Power3.easeOut, onUpdate: () => { console.log('Real update'); } }) ]; const that = this; this.scrollTriggers = [ new gsap.TimelineMax({ scrollTrigger: { trigger: "#bio", scrub: true, start: "top top", end: "bottom top" }, onUpdate: () => { console.log('psuedo update'); let unrefinedProgress = that.scrollTriggers[0].progress() let currentProgress = unrefinedProgress.toFixed(6); gsap.TweenLite.to(that.animationTimelines[0], 0.8, { progress: currentProgress, ease: gsap.Power3.easeOut }); } }) .to(proxy, 1, { value: 1 }) ] //okay now add the actual animation this.animationTimelines[0] .fromTo('#bio-container .bio-animation-wrapper', { opacity: 1, rotationX: 0, scale: 1, y: 0, z: 0, transformOrigin: "50% 50% -100px" }, { opacity: 1, rotationX: 90, y: 100, z: -100, duration: 0.5 }) .fromTo('#bio-container .bio-animation-wrapper', { height: '160' }, { height: '0px' }, '-=.5')

I am sorry if this comes off as a "How do I make X?" but im looking for very specific help. I am copying the type of animation found on this website here: https://iuri.is/ Specifically the text that gets centered on the screen. I have nearly everything figured out except one specific characteristic of the animation. When scrolling a single tick, the animation for the text seems to animation from its current position to the state that corresponds to the value of the scroll bar in such a way that there is a delay. You scroll one notch, then a brief moment later (~0.5s) the text eases slowly into the position. I see on the website, an older version of scrollTrigger is used and I also see when looking at the source code, there is use of the onUpdate method which contains a value for easing. .eventCallback('onUpdate', event => { TweenLite.to(this.timeLines[i], .5, { progress: this.tweeners[i].progress(), ease: Power0.easeNone }); }); I have tried snap but that just slowly moves to the nearest increment after the jolt into position from scrolling. How can I apply the easing function to the transition between its current position, and the new position after scrolling stops? as opposed to the ease function applying to the full value change set in the .fromTo() I see this is applied somehow by using the onUpdate callback with a TweenLite.to implementing the progress field but im having trouble with the way the timeline needs to be set using this approach (code pen updated along with this update to the post) If its unclear what im specifically referring to I can try to record my screen to point out what im observing

This might be a silly question, but If I post my project to github and want to work on it on another computer, Would the NPM install include the additional plugins I got from purchasing shockinglyGreen, or would I need to commit the node modules to github?