[String Variable within Tween]

On 3/11/2020 at 1:39 AM, pmascis said:

So 'ease' and 'varNotWorkingReference' are essentially the same thing,  based on my other readings within this forum I assume it's because they are strings, but am unsure about a way around it? 

 

v2 can't parse config methods in ease strings, so you need to use object form.

 

ease = Elastic[easeType].config(1, 0.3);

 

Other notes. It's wasteful to keep creating the same jQuery object over and over again. Just do it once.

 

let $this = $(this);
  
let duration = $this.data('anim-custom-duration');
let xFrom = $this.data('anim-custom-xfrom');
let xTo = $this.data('anim-custom-xto');
let yFrom = $this.data('anim-custom-yfrom');
let yTo = $this.data('anim-custom-yto');

 

Or don't use jQuery. 

let duration = Number(this.dataset.animCustomDuration);
let xFrom = Number(this.dataset.animCustomXfrom);
let xTo = Number(this.dataset.animCustomXto);
let yFrom = Number(this.dataset.animCustomYfrom);
let yTo = Number(this.dataset.animCustomYto);

 

You don't need to pass a jQuery object to gsap. And you don't need to set units as px is the default.

TweenMax.fromTo(this, duration,
  {delay: 0.25, autoAlpha: 0, x: xFrom, y: yFrom},
  {autoAlpha: 1, ease: ease, x: xTo, y: yTo});

 

See the Pen 2278497285883a7f09befd0046c728cf by osublake (@osublake) on CodePen

 

 

[Animate 3D Mesh along path]

3 minutes ago, OSUblake said:

although I think 3d space is flipped in three.js.

 

Gang signs...

 

[Animate 3D Mesh along path]

3 minutes ago, ZachSaucier said:

That doesn't handle rotation in 3 dimensions though.

 

Just need to calculate rotation using the last position and current position... although I think 3d space is flipped in three.js.

[Animate 3D Mesh along path]

Just now, ZachSaucier said:

You can add a z component to it

 

That just uses gsap's smoothing algorithm, which might be fine for what you're doing. What I found strange is that it doesn't work for type: "cubic" anymore.

 

[Animate 3D Mesh along path]

1 hour ago, ZachSaucier said:

That is, unless @GreenSock wants to add support for 3D bezier curves  No promises, but I wouldn't be surprised if he just drops by and adds a plugin to add support for that, hah. He has a tendency to do things like that for interesting problems  

 

Strange. The old bezier plugin could do 1d, 2d, 3d, whatever. The calculation should be the same. 

 

[getElementsByClassName ?]

getElementsByClassName is a really old method, that nobody really uses that anymore. Just use querySelectorAll or querySelector for selecting 1 element. querySelector/All handles everything including class names, IDs, attributes, tag names, etc. getElementsByClassName is a really old method.

[PIXI.js change sprite texture]

On 3/8/2020 at 11:47 AM, Rodrigo said:

Perhaps @OSUblake can shed some light into this, since He is the PIXI master of this realms  

 

Nah, you covered it pretty well. GSAP can really only animate number values and string values with number or color values in it. A texture is a complex object. If you need to change the texture, then you need to do it inside a callback.

[Timeline playhead position]

14 hours ago, Green-Alpha said:

OK for the "paused" state, but I don't understand because after the timeline is created and an instruction is added, the animation start instantly, so with many instructions the animation will start before all instructions are registered, no ? And what if the last instruction's position is set to 0, like for repeating elements or other timeline ?

 

Animations are updated inside a requestAnimationFrame callback. And an requestAnimationFrame callback cannot happen while the browser is executing/parsing code. So no, animations will never start instantly.

[Touch is not working on Draggable in Firefox Windows [v3.2.4]]

4 hours ago, GreenSock said:

Can anyone else confirm that even that's not working after clearing your cache? @OSUblake? 

 

Works fine for me.

[Touch is not working on Draggable in Firefox Windows [v3.2.4]]

41 minutes ago, Friebel said:

BTW, the link you include in your post is from the year 2014... it's 2020 now, so that's 6 (!!) years ago. We all know that that's 99 years in front-end terms.

 

I don't see 2104. I do see that it was lasted updated in 2019. Regardless of the date, the information is still relevant in current year.

 

25 minutes ago, Friebel said:

So you want to proof something is running or not running in Internet Explorer and now you make a codepen as a demo?

First, the Greensock website throws an error in IE11, because it's using 'foreach' which IE11 doesn't support.

 

I don't know why you are directing that at me. I even don't work for greensock. IE11 supports forEach, just not on a nodelist. Probably something @ZachSaucier should look at.

 

6 minutes ago, Friebel said:

Codepen just doesn't work in IE. Maybe if you have a PRO version you can use it, but I don't have it and my guess is you don't either.

 

For IE, you need to open it in debug mode. I didn't provide the link because I didn't think it was necessary as the behavior is the same as Edge.

https://cdpn.io/osublake/debug/d84560d06bad8055fe0154ed60e9620c

 

16 minutes ago, Friebel said:

Also, you are talking about the old Edge which is not supported anymore and it is replace with the same name (Edge) by the Chromium version? Sorry, but the old Edge is totally irrelevant now. Espectially when every modern browsers has auto update these days.

 

Does that mean that IE isn't relevant?

 

32 minutes ago, Friebel said:

On topic again please: there's an issue in Draggable that needs to be fixed. See my previous post for a direction. Have a nice weekend!

 

It's being looked at. 

[Touch is not working on Draggable in Firefox Windows [v3.2.4]]

14 hours ago, Friebel said:

The latter (Edge) even is just Chromium nowadays, so that's not having any problems whatsoever in this area.

 

I'm not talking about that version.

 

14 hours ago, Friebel said:

Yes they do. Sorry, what you write just isn't true. Not sure why you really think that.

 

Um.... because I'm right.

 

See the Pen d84560d06bad8055fe0154ed60e9620c by osublake (@osublake) on CodePen

 

The only way that will work in Edge is if you turn on a flag in about:flags

 

 

 

[Touch is not working on Draggable in Firefox Windows [v3.2.4]]

By default, IE and Edge don't support touch events. You have to use pointer events.

 

7 minutes ago, Friebel said:

But when using pointer events, they come even before touch, which messes things up in the flow.

 

Why would use touch and pointer events? Here's a good article about how to handle those situations.

https://developers.google.com/web/fundamentals/design-and-ux/input/touch

 

Basically

if (window.PointerEvent) {
  element.addEventListener("pointermove", someFn);
} else {
  element.addEventListener("touchmove", someFn);
  element.addEventListener("mousemove", someFn);
}

 

 

[Touch is not working on Draggable in Firefox Windows [v3.2.4]]

34 minutes ago, Friebel said:

Or maybe the issue is there on Android Firefox 73.0.1 too, but that version isn't released yet?!

 

Nah. Android Firefox is a different browser. One difference is that the Android version doesn't support pointer events by default. 

https://caniuse.com/#feat=pointer

 

I think Draggable uses pointer events whenever possible because it works for mouse and touch.

 

[Touch is not working on Draggable in Firefox Windows [v3.2.4]]

Can confirm. Something @GreenSock needs to look into.

[Modifiers Plugin for Infinite Image Carousel]

@ZachSaucier your demo doesn't seem to snap correctly after dragging.

 

But here's another way.

 

See the Pen 1e13ae4d1583c9a7157b46b995345872 by osublake (@osublake) on CodePen

 

Also, I would got rid of setting type: "x" on the Draggable as it will prevent dragging if you initially start dragging on the y axis, but then change direction.

[Timeline playhead position]

Side note. It's pointless to pause a timeline and then play it. It also confuses readers of your code.

 

var tlCD = gsap.timeline({ paused : true });
var tlC = gsap.timeline({ paused : true });
var tlD = gsap.timeline({ paused : true });

...

tlCD.add(tlC.play(), 0);
tlCD.add(tlD.play(), 0);
tlCD.play();

 

Better.

var tlCD = gsap.timeline();
var tlC = gsap.timeline();
var tlD = gsap.timeline();

...

tlCD.add(tlC, 0);
tlCD.add(tlD, 0);

 

[Move content on canvas background following mouse over]

4 hours ago, odell said:

Seems Im not the only one curious about this. Even gave a potential real world example. Figured I'd direct this here.

 

That site is just doing an interpolation technique, kind of like of I'm doing here to do panning.

 

See the Pen 98e718541df0e1f16f960233b05ecb7d by osublake (@osublake) on CodePen

 

Another example of using interpolation.

 

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

 

But I did the calculation manually in that quick setter demo.

 

// this is the same as...
pos.x += (mouse.x - pos.x) * speed;
pos.y += (mouse.y - pos.y) * speed;
  
// ...as this
pos.x = gsap.utils.interpolate(pos.x, mouse.x, speed);
pos.y = gsap.utils.interpolate(pos.y, mouse.y, speed);

 

A parallax effect can be done by using that technique, but using different speed values for different items.

 

 

[Move content on canvas background following mouse over]

2 hours ago, OSUblake said:

Strange. I've never seen a choppy animation like that in Chrome. Must be some type of Chrome bug as it appears smooth in Firefox.

 

Some type of bug. Chrome is 12x slower than Firefox.

https://bugs.chromium.org/p/chromium/issues/detail?id=1045733&q=canvas drawImage&can=1

 

 

[gsap motion driving me MAD! Any tips?]

9 minutes ago, Paddy said:

Is there some kind of easing on as default for gsap? 

 

Yep. It uses power1.out, which works well as a default for most animations.

https://greensock.com/docs/v3/Eases

 

10 minutes ago, Paddy said:

If so, how do I turn it off and get linear motion?

 

You can turn it off globally.

gsap.defaults({
  ease: "none"
});

 

Or on a per animation basis.

gsap.fromTo("#graphMaskHandle", 60, {x:-155}, {x:0, ease: "none" });

 

[Importing TimelineLite]

5 hours ago, avanikaein said:

I am following tutorials.

 

Be sure to go through the installation docs and watch the videos. You don't need to import TweenLite, TweenMax, TimelineLite, TweenMax, or the CSSPlugin.

https://greensock.com/docs/v3/Installation

 

Just import gsap, and use the new syntax.

import { gsap } from "gsap";

...
var tl = gsap.timeline();
tl.fromTo(to, { left: "-100%" }, { left: "0%", duration: 0.5 })

 

5 hours ago, avanikaein said:

I am trying to use the fromTo method for a page animation (along with Highway js but that seems to be working fine) but I get a console error 'fromTo is not defined'

 

You are missing a . before your last fromTo.

 

5 hours ago, avanikaein said:

The page animation is laggy and lays overtop the "starting" one.

 

Don't know what you mean by laying overtop the "starting" one.

 

It's impossible to tell why your animation is laggy without seeing it. My first guess is that it might have something to do with you animating left, top, and height. Animating those properties can be really slow. It's much better to use x, y, and scale.

 

I don't know what highway is, but it looks like you might be calling your onComplete too soon? I would think that it needs to be called at the end of the animation i.e.

 

var tl = gsap.timeline({  
  onComplete() {
    from.remove();
    done();
  }
});

 

 

[Tweening with a for loop?]

That's an infinite loop. More like.

 

var myObjects = [obj1, obj2, obj3, obj4];

// for loop
for (var i = 0; i < myObjects.length; i++) {
  gsap.to(myObjects[i], {});
}

// for each loop
myObjects.forEach((obj, i) => {
  gsap.to(obj, {});
});

 

See how to do some loops

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

But you really don't need a loop with gsap's function syntax. It does a loop for you.

 

var myObjects = [obj1, obj2, obj3, obj4];
var xDist = 100;

gsap.to(myObjects, {
  x: i => xDist + i * xDist,
  duration: 1
});

 

[Sequencing function calls across pauses]

30 minutes ago, Carl said:

also, to clean things up you can define you function outside of the timeline and call it like so:

 

And don't use call.

.add(doStuffWhenTimelineContinues, "+=0.001");

 

[Move content on canvas background following mouse over]

Strange. I've never seen a choppy animation like that in Chrome. Must be some type of Chrome bug as it appears smooth in Firefox.

[Relative positioning prefixes: what is the difference between ,">" and , ""]

2 hours ago, Thomas James Thorstensson said:

.to(..., "") //starts immediately after the previous tween's end time (sequenced)

 

That comment is relevant to the example code. And maybe it should be written like this instead.

 

tl.to(...)
  .to(...) //starts immediately after the previous tween's end time (sequenced)
  .to(..., ">-0.5") //overlaps with the previous tween by 0.5 seconds (because the number is negative)

 

If you don't supply a position parameter, or use a relative one, like"+=1", it will be positioned at the end of the timeline. Using >  positions at the end of the last of the most recently added animation's end time.

 

Keep in mind that you don't have to position everything sequentially, and can add stuff to a timeline later on. Check how the start time of the scale animation differs in these examples.

 

The scale animation starts at 2 seconds because that's the end time of the timeline when it gets added.

 

tl.to(".box", { x: 100, duration: 1 }, 1)
  .to(".box", { y: 100, duration: 1 }, 0)

  // Starts at 2 seconds
  .to(".box", { scale: 0.5, duration: 1 });

 

Here, the scale animations starts at 1 second because the y animation is the most recently added animation, and its end time is 1 second.

 

tl.to(".box", { x: 100, duration: 1 }, 1)
  .to(".box", { y: 100, duration: 1 }, 0)

  // Starts at 1 seconds
  .to(".box", { scale: 0.5, duration: 1 }, ">");

 

 

 

[Move content on canvas background following mouse over]

1 hour ago, odell said:

from what I understand its "technically" possible  if  placed inline SVG

 

That would essentially be like doing a screen grab. It's good for some stuff. I think @ZachSaucier did this something like that here, but he used a conversion library instead of SVG.

 

See the Pen WyJqdL by ZachSaucier (@ZachSaucier) on CodePen

 

If you want to animate images with canvas, then just use images directly. You can even load them via html like this.

 

See the Pen dfe247389fe365c54b06a06ce6cd328e by osublake (@osublake) on CodePen

 

 

And can someone tell if my animation is choppy in chrome. Not sure if it's the resolution of my monitor.