[synchronizing animation with video using gsap ticker ?]

46 minutes ago, warkentien2 said:

Also, I'm asking on this thread since I didn't find a better place to request documentation updates.

 

In the future, just create a new topic. Sometimes old threads can get overlooked because other people have already responded.

 

[synchronizing animation with video using gsap ticker ?]

7 minutes ago, warkentien2 said:

has the following segment:

//setup a "tick" event listener so that the EaselJS stage gets updated on every frame/tick
gsap.ticker.addEventListener("tick", stage.update, stage);
stage.update();

If we try to run it, it doesn't work.

 

Does this actually work?

gsap.ticker.add(stage.update);

 

Or do you need to bind it?

gsap.ticker.add(stage.update.bind(update));

 

 

[Bonus Plugins problem on netlify]

2 hours ago, sybilrondeau said:

But I use the js minified bonus files in the static folder of Nuxt. So I wonder if I really need the tgz file in the first place because I already use the plugins files in static

 

Are you importing gsap? If so, then you would have to change your imports to point to that folder. If you are just putting the scripts in the head, then you really don't need the tgz.

 

[Constant spinning element when no action and rotating according to scroll direction]

You can animate the timeScale property of an animation, which will allow you to speed it up, slow it down, and even reverse it. 

 

This is just a simple example to get you on the right path.

 

See the Pen 757e8becab6817e805dbea2f14f9f95b by osublake (@osublake) on CodePen

 

You could definitely add in more logic to intensify the timeScale value, kind of like here.

 

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

 

 

[Repositioning Draggable while dragging]

12 minutes ago, Chuck Taylor said:

After a bit more tweaking:

 

That is awesome! Thanks for sharing.

 

2 hours ago, Chuck Taylor said:

Other question: What is the 'proxy' div doing in your code? It's not attached to the DOM. Just curious how it contributes.

 

Well, we're really don't need to drag anything. What we need is something more like gestures i.e. swipe. So the trigger: dial is how the gesture gets initiated, and then draggable just applies the user's movement to the proxy element. From there, we can read the changes made to the proxy and then apply them to something else, like scrubbing a timeline.

 

Does that make sense? It can be bit confusing at first.

 

[Repositioning Draggable while dragging]

29 minutes ago, Chuck Taylor said:

Dragging up is problematic. I am currently console logging the value of this.y in the updateProgress(). Anytime y < 0, it locks up. I'm guessing the timeline is not 'repeating backwards' from 0?

 

I think wrap might be a good one for that.

 

const wrap = gsap.utils.wrap(0, 1);

console.log(wrap(-0.75)) // 0.25

 

32 minutes ago, Chuck Taylor said:

The dial is blank on load - shows no numbers until we first start to drag down.

 

It might need a little jump start to do the first render.

const animation = gsap.timeline({ repeat: -1, paused: true, id: 'animation'})
  .add(baseTl.tweenFromTo(1, 2))
  .progress(1)
  .progress(0);

 

[Repositioning Draggable while dragging]

3 hours ago, Chuck Taylor said:

I believe in his example, he is piece by piece creating a larger timeline, and then 'scrubbing' that timeline with the drag functions?

 

Yep.

 

You're conversion over to newer syntax looks good, so I don't know what's going on. I'll look more at more in depth later and try to figure it out. 

 

[Difference in Timelines and just Variables?]

48 minutes ago, Jim Nayzium said:

Meaning you could feasibly have declared "let tl2 = gsap.timeline" on the ".box" one also, but since there only would have been ONE tween inside that Timeline, it just makes more "conciseness" sense to delcare it as a variable and roll with it so you can reference it later that way.

 

Right.

 

48 minutes ago, Jim Nayzium said:

So it would be fair to say, 

 

VARIABLE is best used as a "container" for ONE tween you'd want to reference later.

 

TIMELINE is a best used as a "container" for MULTIPLE TWEENS you want grouped together (for whatever purpose that may be.)

 

The Timeline statement sounds good. The Variable one doesn't because you might put a timeline in a variable just like I did in that demo. And relying on the term "variable" can get even more muddied once you start doing more advanced stuff, like using functions to return animations.

 

Just think in terms of tweens and timelines. 

 

[Difference in Timelines and just Variables?]

9 minutes ago, Jim Nayzium said:

But why ever us "let my_tween_var = gsap.to(); " etc... versus wrapping it in a simple timeline ? 

 

For the same reason you would put anything in variable. You're need to use it somewhere else in your code, like controlling the playback.

 

See the Pen 0abe5d8654c647a1d0343a9e054ed63e by osublake (@osublake) on CodePen

 

 

[Difference in Timelines and just Variables?]

37 minutes ago, Jim Nayzium said:

BUT can you break down for me how " tl.to "  is different from chaining the gsap objects back to back?

 

Or is it not possible to chain them to each other?

 

It's not possible. It sounds like you might not be understanding the difference between a tween and timeline. There is a lot of overlap in the methods and options, but a timeline is basically a container for tweens.

 

For a set of tweens to behave like your timeline, you would need to something like this.

// notice the delays
gsap.to("#id", {x: 100, duration: 1})
gsap.to("#id", {y: 50, duration: 1, delay: 1 })
gsap.to("#id", {opacity: 0, duration: 1, delay: 2});

 

A timeline has a .to() method, but that it's just a shorthand way of adding a tween. What's happening under the hood....

let tween1 = gsap.to("#id", {x: 100, duration: 1});
let tween2 = gsap.to("#id", {y: 50, duration: 1 });
let tween3 = gsap.to("#id", {opacity: 0, duration: 1});

let tl = gsap.timeline();
tl.add(tween1);
tl.add(tween2);
tl.add(tween3);

 

37 minutes ago, Jim Nayzium said:

And also can someone provide for me the "handy little way to remember" when it's best to use VAR versus TIMELINE ?? Like a "general rule of thumb?"

 

Not sure what you mean by "VAR", but just use a timeline if you have more than 1 animation that needs to be grouped/sequenced. If you have a single animation that can play independently of other stuff, then use a tween.

 

[infinite rotation]

That's fine, you just can't use all as the property.

 

.icon{
    filter: invert(89%) sepia(54%) saturate(4856%) hue-rotate(314deg) brightness(109%) contrast(90%);
    width: 60px;
    height: 60px;
    margin: 25px 0; 
    transition: filter 0.5s ease;     
}
.icon:hover{
    filter: invert(87%) sepia(94%) saturate(1270%) hue-rotate(304deg) brightness(122%) contrast(92%); 
    transition: filter 0.5s ease;
}

 

[Background reveal with svg blob]

3 minutes ago, PointC said:

In this case you can't export and get the correct viewBox from AI. You'll get some funky coordinates for a box that encloses all the shapes. You need to Save As SVG.

 

Thanks!!!

[Repositioning Draggable while dragging]

Hey @Chuck Taylor

 

Here's something I made. It's not using the latest syntax, but it should be pretty easy to convert.

 

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

 

[Background reveal with svg blob]

1 minute ago, Cassie said:

centering with align and then dragging it up into the corner until the intersect marks it as center.

 

Right, but the view box changes and the coordinates aren't negative. At least that's how it is when I export. 🤷‍♂️

 

 

[Background reveal with svg blob]

46 minutes ago, akapowl said:

You mean like this?

 

Yesss!!!

 

See the Pen 5648de67fb458da3752fa9168a80f8f6 by osublake (@osublake) on CodePen

 

Although now I want to know if there's an easy way to do that in Illustrator. If not, Inkscape is free.

 

[React dynamic endless marquee container.]

I think you will need to do some cloning until the content is wider than the canvas. Maybe like a min of 2x the width. 🤷‍♂️

 

And instead of animating each text block individually, put them inside a wrapper, and animate the wrapper instead. That way they will be the same width.

 

<div class="wrapper">
  <div>This is a short text: 1</div>
  <div>A shorter text: 2</div>
  <div>This can be a long text but not as long as you'd think: 3</div>
  <div>Styles.css: [4]</div>
  <div>Package.json: 5</div>
  <div>Create New topic about crawlers: [6]</div>
</div>
<div class="wrapper">
  <div>This is a short text: 1</div>
  <div>A shorter text: 2</div>
  <div>This can be a long text but not as long as you'd think: 3</div>
  <div>Styles.css: [4]</div>
  <div>Package.json: 5</div>
  <div>Create New topic about crawlers: [6]</div>
</div>
<div class="wrapper">
  <div>This is a short text: 1</div>
  <div>A shorter text: 2</div>
  <div>This can be a long text but not as long as you'd think: 3</div>
  <div>Styles.css: [4]</div>
  <div>Package.json: 5</div>
  <div>Create New topic about crawlers: [6]</div>
</div>

 

[Flip.isFlipping.isFlippingAWESOME = true :)]

Sounds like you get it. The space would be another element. If they are connected, it would be the same element.

 

<!-- #first.active would select the #first element -->

<div id="first" class="active"></div>

 

<!-- #first .active would select the second element -->

<div id="first">
  <div class="active"></div>
</div>

 

[Background reveal with svg blob]

Just trying to figure stuff out for future reference. Does anyone know how to export an SVG so that the shape is centered at 0,0? Meaning most of the coordinates will be negative because they lie outside the svg. This would make it really easer to center stuff, like to the mouse cursor, especially if morphing will be involved as the dimensions of the shape might change.

 

 

 

 

cc @PointC

 

[Three.js and targeting a part of the 3D model to animate with GSAP]

It looks like that might be undefined because the model hasn't loaded.

 

 

[Stop scrollTrigger and animations when window is too small (after resize)]

Your code has little meaning without a demo.

 

If you only want animations to work at a certain screen size, you can create them inside .matchMedia().

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

[Play video when user first begins to scroll on page]

Hi @LauraS

 

You're using jQuery, which doesn't return the actual video element.

 

I would just do this.

var videoElem = document.querySelector('#vid1');

 

[ScrollMagic 2.0.8 doesn't work with GSAP 3.5.1]

Hi @Dziugas 

 

We don't support ScrollMagic as that's not a gsap product. We do have a ScrollTrigger, which should be able to do everything ScrollMagic can.

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

This is only for demo use on CodePen.

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>

 

You don't need these.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js"></script>

 

Just these for gsap and the MotionPathPlugin, which replaces the BezierPlugin.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/MotionPathPlugin.min.js"></script>

 

See the installation docs.

https://greensock.com/docs/v3/Installation?checked=core,motionPath#CDN

 

[Use functions to detect variables in tweens based on getBoundingClientRect()]

Hm... I'm not sure what you're trying to do. Can you make  a really simple demo showing the issue?

 

[Background reveal with svg blob]

On 5/8/2021 at 7:43 AM, Cassie said:

Also, I wrote this article on getting values from mouse movement and plugging them into animation

 

Love your animations!

 

Here's another way to get mouse coordinates inside an svg.

 

See the Pen 383a987e80f497e08b94dd6c3684841a by osublake (@osublake) on CodePen

 

That technique will work with any element inside an svg.

 

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

 

 

[Use functions to detect variables in tweens based on getBoundingClientRect()]

11 minutes ago, OSUblake said:

You can remove the transforms, measure, and then reapply the transforms. 

 

More context about how you can do that.

 

See the Pen 4ccc5df5ce195ae1527e923babb5429f by osublake (@osublake) on CodePen