jesper.landberg

Hi, I have a site, which on page load animates a title using splittext. After the animation is done I revert the animation. The site is using "ajax" transitions, so no hard refresh between pages. When I go to a new page I'm also doing a splitText animation on the same title element. Going from the initially loaded page to another page works fine, however, when going back to the original page, the splitText animation wont run. The element is split and the initial tween values are setup, but it wont animate. I have a hard time understanding what might cause this. I can't link the site here but if anyone want to see what I mean I can PM the link.

Hi, Is it possible to disable warnings for the DrawSVGPlugin? Keep getting this: "Warning: <path> length cannot be measured accurately when vector-effect is non-scaling-stroke and the element isn't proportionally scaled." And since its a stroke animated on scroll i get hundreds of these in my console.

Thanks, seems good. I'm starting to notice that even tho I have used GSAP for a couple of years now there is so much good stuff that I haven't check out yet. Anyway: I setup my current code in a PEN. Still not really sure how to do this. Should I make a proxy element outside the current slider element, set that as the draggable element, without throwprops, and then update the actual slider element with values from Throwprops track?

Hi, In the attached codepen u can see a draggable slider I made from scratch a while ago, that has a skew effect based on acceleration and velocity. I want to archive the same effect using draggable. What approach would be the best to archive something like this using draggable? What events and props should I look at? Would it also be possible to get the easing effect on drag as in my own slider? Using a lerp function to archive this. thanks

Sure is:) Kind of obvious when I look at it! Thanks for the fast answer!

Hi, I have this piece of code: let gradient = { valA: 0, valB: 0 } elem.tl .from(elem.el, 1.25, { alpha: 0, ease: Linear.easeNone }, 0) .to(gradient, 0.75, { valA: 0, valB: 50, ease: Linear.easeNone, onUpdate: () => { TweenMax.set(elem.el, { webkitMaskSize: 'cover', webkitMaskImage: `linear-gradient(170deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) ${gradient.valB}%)`, }) } }, 0) .to(gradient, 0.5, { valA: 100, valB: 100, ease: Linear.easeNone, onUpdate: () => { TweenMax.set(elem.el, { webkitMaskSize: 'cover', webkitMaskImage: `linear-gradient(170deg, rgb(0, 0, 0) ${gradient.valA}%, rgba(255, 255, 255, 0) ${gradient.valB}%)`, }) } }, 1) What I am doing here is that I update the gradient value onUpdate. But since I need valA to just be updated halfway through it looks like above. Basically what I want is this: `linear-gradient(170deg, rgb(0, 0, 0) ${gradient.valA}%, rgba(255, 255, 255, 0) ${gradient.valB}%)` To be animated in this order: gradient.valB animates from 0-100 during the full onUpdate sequence. gradient.valA animates from 0-100 starting at the half mark of the onUpdate sequence. Possible to do this in some more elegant way than two different onUpdate functions as above?

Alright cool, so if I just need to start a rAF upon page load for example, and then need it to run for the duration of the visit, using the ticker might be a tad better?

Is there any benefit in using the Tweenmax ticker vs rAF when it comes to performance? Like if I need multiple rAF's, would multiple tickers be better?

lol.. always the small things, thanks for saving me some additional hours of staring:P

See bottom of my pen, I'm trying to animate clip-path, but the style is not applied to the bg element. When I console log(clipPath.value) it goes from the two values correctly, but nothing is applied. No console errors. Can anyone see why?

Thanks, when using something like modifiersPlugin, is it possible to pause it when not currently moving the mouse for example, with rAF I would cancel it when the lerp is done for example.

Thanks will check those out:) What I am doing in this particular case is basically together with a mousemove event. I get the mouse coordinates with the event and then animate stuff with requestAnimationFrame. But in general I use requestAnimationFrame with most event that are fired a lot... mousemove, scrolll, touch events and so on. But maybe ModfiersPlugin might be able to replace requestAnimationFrame in some of these cases? Will check=) Here is a quick demo of what im currently doing basically:

Hi, Is TweenMax set different from using native js to set styles on an element? Im animating some stuff inside a animationFrame and just want to know if .set has any downside? Or the contrary? function run() { //TweenMax.set(element, { x: someVariable }) //element.style.transform = `translate3d(${someVariable}px,0,0)` window.requestAnimationFrame(run) } window.requestAnimationFrame(fun)

Thanks for the tip. Btw, which of the below would be preferable (timeline vs multiple tweenmax): const tl = new TimelineMax({ paused: true }) const element1 = document.querySelector('.js-element--1') const element2 = document.querySelector('.js-element--2') const element3 = document.querySelector('.js-element--3') tl.from(element1, 1, { autoAlpha: 0, ease: Expo.easeOut }) if (element2) { tl.from(element2, 1, { autoAlpha: 0, ease: Expo.easeOut }, 0) } if (element3) { tl.from(element3, 1, { autoAlpha: 0, ease: Expo.easeOut }, 0) } tl.play() Multiple TweenMax const element1 = document.querySelector('.js-element--1') const element2 = document.querySelector('.js-element--2') const element3 = document.querySelector('.js-element--3') TweenMax.from(element1, 1, { autoAlpha: 0, ease: Expo.easeOut }) if (element2) { TweenMax.from(element2, 1, { autoAlpha: 0, ease: Expo.easeOut }) } if (element3) { TweenMax.from(element3, 1, { autoAlpha: 0, ease: Expo.easeOut }) }

const tl = new TimelineMax({ paused: true }) const element1 = document.querySelector('.js-element--1') const element2 = document.querySelector('.js-element--2') const element3 = document.querySelector('.js-element--3') tl.from(element1, 1, { autoAlpha: 0, ease: Expo.easeOut }) // If element2 exist, start after element1 is done if (element2) { tl.from(element2, 1, { autoAlpha: 0, ease: Expo.easeOut }) } // If element3 exist, start after element2 is done, and if element2 not exist, start after element1 if (element3) { tl.from(element3, 1, { autoAlpha: 0, ease: Expo.easeOut }) } tl.play() Does the above work? EDIT: Seems like it works, any recommended way?

Hi I made this little class, I have had npm/webpack issues with ScrollMagic, and felt it was a bit overkill for my needs, so I made this little class now. Would be nice with some feedback, how it could be improved and so on. Maybe more general JS related than GSAP related, but since I'm only using GSAP and trying to make the class around GSAP it would be nice with ur feedback.

Thanks for all the answers, I think I have a better understanding of FLIP now=) Btw, FLIP or not in your opinion @OSUblake but is the trick that Johanthan is mentioning a good way to help to smoothen up things when there are heavy or many concurrent animations going on?

Hi, I'm trying to make an image gallery where the big image is transformed based on the thumbnail getBoundingClientRect() values. But I'm having trouble with the y transform value, I get the correct difference value but the scaling makes it look out of place. Check my Pen and u will see what I mean.

Hi, Just wanted to check if anayone has tried the FLIP animation technique with GSAP? Explained here: https://aerotwist.com/blog/flip-your-animations/

Ohh nice didnt know there was linesClass! Thanks!

Hi, Is is possible in some straigh forward way to animate chars (or words) inside a line as an independent animation? Just stagger from the first word to the last in each line, rather than from the first word in the first line to the last word in the last line.. .. anyone understand?=) const elem = new SplitText(el, { type: 'lines, words' }) TweenMax.staggerFrom(elem.lines, 1, { y: 20 }, 0.1} And then TweenMax.staggerFrom(elem.lines.words, 1, { x: 20 }, 0.1} Rather than TweenMax.staggerFrom(elem.words, 1, { x: 20 }, 0.1} Would I need to do a new SplitText on each elem.lines?

Hi, I'm experimenting a bit with Canvas, and was wondering if it is possible to tween attributes of arcs and rects (and other stuff) with GSAP? What I'm trying to do in the codepen is to scale up the ctx (circle) when hovering the link, by scaling or increasing the radius. https://codepen.io/ReGGae/pen/NXqjpo

Yup 100% sure, and to be extra sure I replaced it with the npm bonus file now=) Btw I sent u a link in a PM f u want to look at it in the browser.

I also tried copying the npm gsap folder to my project assets folder but that gave me errors aswell. The console log outputs undefined for for ThrowPropsPlugin.version and the below for window.com.greensock.plugins Object AttrPlugin:ƒ () BezierPlugin:ƒ () CSSPlugin:ƒ () DirectionalRotationPlugin:ƒ () ModifiersPlugin:ƒ () RoundPropsPlugin:ƒ () TweenPlugin:ƒ (props, priority) __proto__:Object And btw this is how I import/require the modules now... but it's the same if skipping the conditional and using es6 imports. import TweenMax from 'gsap' let Draggable let ThrowPropsPlugin let ModifiersPlugin if (process.browser) { Draggable = require('gsap/Draggable') ThrowPropsPlugin = require('~/assets/js/ThrowPropsPlugin') ModifiersPlugin = require('gsap/ModifiersPlugin') }

Thanks. Having issues when npm installing the repo tho:S Throwing me all kinds of error, access rights and so on.. guess it's a user problem, but even if I update my ssh config I guess netlify will get the same access right errors when it is running the build script on deploys. Any idea WHY I'm having this throwprops issue? I mean other premium plugins like SplitText is working just by importing it from my local path. The weird thing here at least from my point of view is that there is no errors thrown... it's just like throwprops isn't there. It's not possible to solve this using webpack aliases or so?