[TweenLite inside of react project not working after build]

For v2.

import { TweenLite, ScrollToPlugin } from "gsap/all";
const plugins = [ScrollToPlugin];

// if you need to animate CSS properties
import { TweenLite, CSSPlugin, ScrollToPlugin } from "gsap/all";
const plugins = [CSSPlugin, ScrollToPlugin];

 

But I would recommend upgrading to v3.

 

 

[Get tween type (to, from...) and ease function as string from tween]

2 hours ago, BemjaxIDE said:

how can I get instantiated tween's ease function name?

 

You can get the ease map like this.

 

var easeMap = gsap.parseEase();

 

But that will only give you registered eases. Someone could use an unregistered ease. It's just a function. 

 

gsap.to(".box", {
  x: 500,
  ease: p => p
})

 

 

["TypeError: undefined is not an object" in Safari only?]

Did you try to use getItem(1) instead of [1]?

 

const point = polyline.points.getItem(1);

gsap.to(polyline, {duration: 1, morphSVG: dot_position.x + " " + dot_position.y  + "," + point.x + " " + point.y});

 

 

["TypeError: undefined is not an object" in Safari only?]

Safari supports SVGPoint. It's not an array, so you should use the appropriate method for an SVGPointList.

http://html5index.org/SVG - SVGPointList.html

https://developer.apple.com/documentation/webkitjs/svgpointlist

 

See the Pen 064ffdb32643102f80643ae4d2e001fa by osublake (@osublake) on CodePen

 

 

[quickSetter rotation]

2 minutes ago, ZachSaucier said:

Use "rotation" and not "rotate". "rotate" is a convenience that GSAP adds for tweens, quickSetter doesn't do things like that.

 

That's what I tried first, but maybe I spelled it wrong. 🤷‍♂️

 

Regardless, I think rotate should work. That's what I want to set.

 

[quickSetter rotation]

How it should look.

 

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

 

 

[quickSetter rotation]

Can't seem to get rotation to work with quickSetter.

See the Pen 7a12455f7e4a9114cf606c27be12affa by osublake (@osublake) on CodePen

[Loop RawPath]

Well, that's probably more accurate, but it used to loop with the BezierPlugin. Maybe Jack forget to implement it, or it's undocumented. 🤷‍♂️

 

See the Pen bdOJmz by MAW (@MAW) on CodePen

 

 

[When pc lags]

A similar thread. The demo shows how using delta time is pretty much the same as gsap. I'm not using an accurate duration for the gsap animation, so it's a little out sync.

 

 

You can adjust the lag smoothing. If you use small values, then you'll see more frames, but it will run slower.

https://greensock.com/docs/v3/GSAP/gsap.ticker

 

 

[Loop RawPath]

Is there a way to get the raw path to loop? I thought the BezierPlugin used to do this when the start and end points were close to each other.

 

 

See the Pen 6aca5e9d4531ac3aa08ecf1a2f8bba91 by osublake (@osublake) on CodePen

[Path Intersection]

4 minutes ago, Shrug ¯\_(ツ)_/¯ said:

Kevin Lindsey did some neat stuff with his Intersection.js library http://www.kevlindev.com/geometry/2D/intersections/index.htm 

 

Oh wow! That site sure is familiar. Spent like a year deconstructing all his work.

 

 

[Path Intersection]

5 hours ago, jdw2 said:

Does Greensock have any methods akin to the following in either it's core or in any of the plugins

 

No. There's not a lot of libraries that can do that.

 

5 hours ago, jdw2 said:

would rather not have to rely on additional libraries

 

You don't need d3 for the code you provided. consolidate is a native method.

https://developer.mozilla.org/en-US/docs/Web/API/SVGTransformList

 

 

[PixiPlugin webpack]

1 minute ago, spassvogel said:

Okay I must have read that in a forum post somewhere. Probably the documentation is a more sensible place to start. Thanks again.

 

Yeah, that's a problem with finding answers on the forums. Most stuff posted before 2020 is going show the older syntax.

[PixiPlugin webpack]

Make sure you register PixiPlugin, not PIXI.

gsap.registerPlugin(PixiPlugin); 

 

 

[PixiPlugin webpack]

Hard to say without seeing your project. Can you make simple repo showing the problem?

 

Also, you should be consistent with your imports and syntax. There is no need to use TweenLite/Max or TimelineLite/Max anymore.

 

import * as PIXI from 'pixi.js';
import { gsap } from 'gsap'
import { PixiPlugin } from 'gsap/PixiPlugin';

gsap.registerPlugin(PixiPlugin); 
PixiPlugin.registerPIXI(PIXI);

gsap.from(ref.current, { 
  duration: 1, 
  pixi: { 
    scale: 0.2, 
    rotation:60 
  }
});

 

Please follow the installation instructions.

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

 

And the migration guide.

 

 

[How to create/interrupt a repeating idle animation]

15 minutes ago, GreenSock said:

Good catch - it was actually killing the animations themselves, but the bug had to do with it not removing the tween from its parent if (and only if) it was a tween with an internal timeline (meaning it had a stagger or keyframes).

 

Well that's strange as none of the tweens had staggers or keyframes in that demo. 

[How to create/interrupt a repeating idle animation]

Try this for now. I updated everything to v3 syntax. One problem is that those random movement tweens are recursive, so we need to kill them.

 

See the Pen 66b5031f646ca23c565fb693de35f132 by osublake (@osublake) on CodePen

 

 

@GreenSock I couldn't get killTweensOf to work. Can you take a look at that demo on line ~59. I had to manually kill the tweens.

 

 

[How can I use GSAP 3 with scroll magic?]

1 hour ago, Black Ducas said:

Horizontal scroll necessarily needs to be scrolled by mouse wheel up/down like we tried to do here:

 

By horizontal scrolling, I meant actual scrolling that can be done by the browser, so you can scroll horizontally with touch or a trackpad. That's just animating a container on the x axis. But what were you looking for gsap to implement in your example?

 

And technically you can scroll horizontally with a mouse wheel by holding shift, but most people don't know that. 

 

Or with JavaScript. A quick and dirty example. Don't use this code.

 

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

 

 

[MotionPath in Front and Behind an Object]

I would put a copy of the green box behind the circle, and toggle the visibility of the front box when it goes above and below the box.

 

Well that's how you would need to do it in svg as there is no z-index.

[How can I use GSAP 3 with scroll magic?]

Yes, but how do you handle horizontal scrolling? I see on the scrollmagic site that horizontal scroll doesn't work with a mouse wheel. 

https://scrollmagic.io/examples/basic/going_horizontal.html

 

What are desktop users supposed to do? Manually drag the scrollbar right?

 

It's not too hard to get the mouse wheel to scroll a container horizontally, but a lot of people don't do that. 🤷‍♂️

 

[How can I use GSAP 3 with scroll magic?]

7 minutes ago, wpsoul said:

I am also waiting new plugin. Currently, I am using Scroll magic because it has one cool feature like Pin option and horizontal scroll. I hope new plugin will also have it. 

 

It does, but I'm wondering why people do horizontal scrolling. Kind of a pain when you only have a mouse wheel that goes up and down.

 

 

[Clone draggable stickers and reapply location within SVG]

I guess you came across a bug in my code. I fixed it.

document.querySelector(`#${data.fromId}`).cloneNode(true);

 

[Clone draggable stickers and reapply location within SVG]

3 minutes ago, Gingah said:

At first I thought that was the same example I was working off of earlier, but that's a great addition!

 

Thanks. It's similar to what I did to create an online/real-time word game with draggable and firebase.   

 

8 minutes ago, Gingah said:

For some reason the fork-button disappeared, but I put some of the code I was using into it, and the location-fidelity seems to work exactly as expected: 

 

Yeah, I have CodePen to automatically create private pens, and it won't let you fork private pens. I don't understand the logic behind that because it's just an inconvenience as you can still copy and paste the code.

 

 

[Clone draggable stickers and reapply location within SVG]

👆 I probably wrote that wrong after looking at the localForage docs.

 

This gives matching results.

 

async onDragEnd() {
      
  await map.setItem(this.target.id, {
    src: this.target.getAttribute("href"),
    x: this.x,
    y: this.y
  });

  const res = await map.getItem(this.target.id);
  console.log("\n");
  console.log(res.x, res.y);
  console.log(this.x, this.y);      
},

 

But some positioning looks off when you reload, and there are some errors in the console.

 

[Clone draggable stickers and reapply location within SVG]

5 hours ago, ZachSaucier said:

Most likely the different in positioning is due to setting some values with GSAP and some not with GSAP.

 

I'm not sure what the problem is,  but I did this as a sanity check before making that demo.

 

onDragEnd: function () {
  window.map.setItem(this.target.getAttributeNS(null, "id"), {
    src: this.target.getAttributeNS("http://www.w3.org/1999/xlink", "href"),
    // x: this.target.getBoundingClientRect().x,
    // y: this.target.getBoundingClientRect().y        
    x: this.x,
    y: this.y
  });

  // *** THESE SHOULD MATCH ***
  map.getItem(this.target.id).then(res => {
    console.log("\n")
    console.log(res.x, res.y)
    console.log(this.x, this.y)
  });      
}

 

The values stored are not the same as the draggable, so there has to be a logic error somewhere, or a problem with localForage.