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.

7 hours ago, GreenSock said:

Sure, it's totally doable but I don't have time right now to rebuild it all for you from scratch. You could just use an invisible <div> that's on top of the images as a proxy of sorts, and just tween the position of the "real" element(s) to match the proxy. And since you're a Club GreenSock member, you have access to ThrowPropsPlugin which can track (and report) velocity of anything, so you could tap into that inside of an onDrag or something. 

 

https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.track()

 

Hopefully that gets you going in the right direction. Let us know if you need anything else. 

 

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

See the Pen EEwrRp?editors=1000 by ReGGae (@ReGGae) on CodePen

4 minutes ago, GreenSock said:

Sure, all you need is one onUpdate. Here's some simplified code: 

let gradient = { valA: 0, valB: 0 }

elem.tl
.to(gradient, 1, {
  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}%)`,
    })                
  } 
}, 0)
.to(gradient, 0.5, {
  valA: 100,
  ease: Linear.easeNone
}, "-=0.5"); 

 

You can have tweens update the raw "gradient.valA" and "gradient.valB" as much as you want, and just point their onUpdate to a common function if you'd rather - the point is simply to have that function apply ALL of the values to the final string.

 

Is that what you're looking for? 

 

 

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?

2 minutes ago, OSUblake said:

There could be a small performance hit if you have multiple rAF loops. GSAP's ticker will only call rAF once for every listener. What's best really depends on what you're doing. For long running usage I typically use GSAP's ticker unless I'm using a library that has it's own ticker, like PixiJS. For short term usage, like debouncing an event, I might use rAF or a promise.

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?

10 hours ago, GreenSock said:

GSAP seems to be doing exactly what you asked, but I believe you're missing a "px" (unit) in your circle value. 
 

//BAD: 
value: `circle(${window.innerWidth * 1.25} at 50% 50%)`

//GOOD: 
value: `circle(${window.innerWidth * 1.25}px at 50% 50%)`

 

Does that help? 

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?

See the Pen KBLqOW?editors=0010 by ReGGae (@ReGGae) on CodePen

On 8/1/2018 at 4:10 PM, OSUblake said:

 

 

Do you remember this thread?

 

 

I mainly showed the ModifiersPlugin, but there's nothing wrong with using rAF, particularly if you're managing a bunch of different events. If that's the case, you could use the ticker instead.

https://greensock.com/docs/TweenLite/static.ticker

 

The Pixi demo is using the ticker provided by Pixi, but it's the same concept.

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.

7 hours ago, OSUblake said:

Do you actually need to call requestAnimationFrame? The ModfiersPlugin might be a better option depending on what you're doing. Check out these demos.

 

https://codepen.io/collection/AWxOyk/

 

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)

13 minutes ago, Carl said:

Thanks for the demo. Sometimes its good just to test things like that.

 

What you are doing is fine, but its probably worth pointing out that those conditions only run when then timeline is being built, not when it is running.

In other words, if you restart the timeline, its not like those conditions will be re-evaluated and you'll get a different animation if the those elements got removed for some reason.

 

If you need the timeline to behave differently each time it is run, I would suggest creating a function that you call that would re-create the timeline based on the conditions that exist at that time. 

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?

See the Pen jpaBQb by ReGGae (@ReGGae) on CodePen

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.

See the Pen GBWqRz?editors=0010 by ReGGae (@ReGGae) on CodePen

4 hours ago, OSUblake said:

And yes, I do understand the point you were making about precaluclating values for better performance. I would never argue that that is a bad thing.

 

I was talking about the actual inverting of an animation, which is what @jesper.landberg was probably asking about because that is what it looks like he is trying to do in this post. That is very similar to the video animation I did in the post that @Sahil linked to.

 

 

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.

See the Pen VXMxKr?editors=0010 by ReGGae (@ReGGae) on CodePen

Hi,

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

Just now, Carl said:

Not sure I fully understand. To animate the words in a single line you can target that line using a linesClass

var mySplitText = new SplitText("#quote", {type:"lines, words", linesClass:"lines++"}),
    tl = new TimelineLite();

//animate only the words in the first line
tl.staggerFrom(".lines1 div", 0.5, {opacity:0, scale:0}, 0.2)

 

See the Pen jZLjzw by GreenSock (@GreenSock) on CodePen

 

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.

See the Pen NXqjpo by ReGGae (@ReGGae) on CodePen

Just now, OSUblake said:

Are you sure you're using the files from the "bonus-files-for-npm-users" folder? SplitText doesn't have any dependencies, so that might not cause any problems. However, throwProps does, so that might be the issue.

 

 

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.

6 minutes ago, OSUblake said:

 

You can install from a local folder instead of a repo using the same approach. That might get around those access rights.

 

 

Definitely weird. What do you see when you log this out?

console.log(ThrowPropsPlugin.version)
console.log(window.com.greensock.plugins)

 

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

1. 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')
}

On 2017-11-08 at 2:06 PM, OSUblake said:

Hi @jesper.landberg

 

I know this isn't ideal, but it should work.

 

Create a private repo. Some services like GitHub charge for that, but there are free alternatives like GitLab, BitBucket, and Visual Studio Team Services.

 

Add the JS files npm normally installs with GSAP to that repo. It's important to use those files as their require statements are setup for a flat directory structure. Now add the the Club GreenSock plugins to that repo.

 

Now create a package.json for that repo. Something as simple as this will do.

{
  "name": "gsap",
  "version": "1.20.3",
  "main": "./TweenMax.js"
}

 

You should now be able to install from that repo.

https://stackoverflow.com/questions/10386310/how-to-install-a-private-npm-module-without-my-own-registry

https://docs.npmjs.com/cli/install

 

And import like this.

import TweenMax from 'gsap'
import Draggable from 'gsap/Draggable'
import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin

 

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?