[Using photographic images, in different sizes, to animate responsively to devices]

you can also try: https://css-tricks.com/almanac/properties/o/object-fit/

[Using photographic images, in different sizes, to animate responsively to devices]

with some new specs, you can do:

 

https://github.com/eeeps/eleventy-respimg

[Reset the starting position of an array of elements after staggerTo() is called]

probably, you could .progress(0)/seek(0) on that animation..

set() is adding zero duration tweens.. which is somehow diverges syntactically from the intention.

[Reset the starting position of an array of elements after staggerTo() is called]

when you thought about using .set(), were your animation running?

[Flexible duration of the animation]

See the Pen jKgwNw?editors=0010 by determin1st (@determin1st) on CodePen

 

in one timeline variant..

 

 

[Animation Zooming effect]

from the beginning of what?

[My first Tween]

1 hour ago, SC_74 said:

Doesn't work!

 

Prove it!

 

if you .play() timeline later, create it {paused:true}. also, i dont get why you use .from() call. also, you can add single tween to timeline using .to() method. also, dont hope that GSAP will handle state management for you, better, control it separately. also, everything you do with jquery there, can be done with plain JS..

 

[Using photographic images, in different sizes, to animate responsively to devices]

See the Pen NzzYXB?editors=0110 by determin1st (@determin1st) on CodePen

 

some example..

 

 

 

 

 

 

[Using photographic images, in different sizes, to animate responsively to devices]

i would create 4 divs with hidden class (or style, whatever), each with the image (only 4 images, not much to load), then add event listener to the window resize and then, depending on width, animate that div-container.. why svg?

[My first Tween]

try creating a timeline for sequencing. onComplete is for different things.

[A game I made using GSAP]

you dont need to download anything if its not using backend framework stuff. create a link with rawgit.com to .html file and pass it around.

[GSAP Slider, carousel with text animation]

you dont animate image or it's container in that demo, so the question is unclear, imo.

[Uncaught exception: Cannot tween a null target.]

well, you passing plain function to onComplete, that's why you get repeated errors.

You can tweenToRandomColor.bind with the target parameter or make target variable accessible from upper scope.

Also, im not sure if it will tween result from .getContext()...

[How to get two layers of animation with different opacity]

You dont animate opacity there (in your code). you create elements with only .line-one classname and then animate x/y position.

Looks like you need to randomize creation (with different class name), not className animation...

 

[Failing Animation]

You should create single timeline with all tweens as PointC sayed ^ for better control but I dont recommend to use reverse, instead, create another "reverse" timeline and manage state using internal variable (it's simpler than adding/removing classes to DOM element). After that you have several options when state changes:

 

1. block state change if some of timelines is active.

2. kill() or finish opposite active timeline and start target state change timeline.

3. combine timelines, but it's not needed as it is only two states.. (on/off)

 

also, you can re-create timelines every time instead of using same timeline instances (they will overwrite each other as they use same targets) but you have to hold those instances in memory for further checks.

 

[A final clarification about invalidate() and responsive timelines]

One more thing. The greensock animation plays it's duration even if starting/ending values are equal, I've tested it for className, but suppose it is true for manual setting. The .isActive() returns true and it could be more appropriate for this case to act like a duration=0.

[A final clarification about invalidate() and responsive timelines]

50 minutes ago, GreenSock said:

 

Absolutely - because invalidate() delivers a totally different result which isn't intuitive in many cases. Plus invalidate() is expensive performance-wise (it must flush the recorded start/end values and re-query and re-record them). When you replay an animation, typically people expect it to look the same as it did the first time. And imagine if your timeline is at its end state and then you invalidate() and try playing again - it's probably gonna look really weird because it's already sitting at its end state...so the new starting values will match the end state and you'll likely get no animation (though of course that'll get more complex if you've got other tweens on the same values in a sequence that are all invalidated()). See what I mean?

 

 

Sure, I see your logic and I can argue that, but as you said it's about intuition, okay, let it be.

 

[A final clarification about invalidate() and responsive timelines]

Just now, Acccent said:

 

I assume it's for both for performance, and also because these are two distinct behaviours and both can be useful in some cases.

 

Here's a follow-up question: assuming there's a choice between a percent-based timeline, that's responsive by default, and one that uses x and y but needs to be recreated every time, what's the better approach? I guess both performance-wise and when it comes to workflow? (This may be subjective!)

 

i think, it's the same speed, because element's computed style is always returned in pixels, so the initial % needs to be determined together with the ending %, but this is done inside the lib, more flexibility, less codewriting.

 

 

[A final clarification about invalidate() and responsive timelines]

Is there any reason why .invalidate() is not done automaticly when .play() happens?

[Understanding this in "onUpdate"; difference between TweenMax and TimelineMax]

Does 'onUpdate' happens after or before the tweening values update?

 

 

[What easings comes out of the box (yeah, of what box)?]

Checkout this line:

https://github.com/determin1st/redsock/blob/66280c2f1aa6cc500f8478ca01a35faae8640d97/TweenMax.js#L7255

https://github.com/determin1st/redsock/blob/66280c2f1aa6cc500f8478ca01a35faae8640d97/TweenMax.js#L7255

 

 

[Element sizing with className & height:auto]

18 hours ago, Acccent said:

I'm afraid I don't really understand a single thing of what you're suggesting, nor do I really get how a solution that takes so many lines and setup could be easier or more intuitive than just 3 tweens triggered with pointer events... Sorry! Good luck though

 

I don't suggest. Just answering. It's not easier, it's more flexible. We do different things.

 

[Element sizing with className & height:auto]

13 hours ago, Acccent said:

 

I mean, you can have :hovered, :focus, :hovered:focus, :hovered:checked, :focus:checked, :hover:focus:checked. That seems like a lot, and I'm sure I'm forgetting some.

 

You can have :hovered instead of .hovered if you are going to animate with CSS transition, but you are not, right? (You want to animate with GSAP) Also, these standard pseudo-classes are very limited in name/number. They are separated from browser events, so you won't be able to implement complex logic.

 

 

13 hours ago, Acccent said:

 

And what about when you want different components of an animation to animate at different speeds?

 

 

You and I use queue for that. The difference, i suppose, that we use it differently. You:

// define, init, assemble, run
timeline.to(node1, {anim1});
timeline.to(node1, {anim2});

 

I write more data-oriented way:

// define
hover = [{anim1}, {anim2}];
...

// init
hover[0].node = node1;
hover[1].node = node1;
...

// assemble
timeline = redSock.queue(hover);
...

// run
timeline.play();

 

Here, I had to write "queue" function, which interprets a sequence of tweens, given as a parameter and creates a timeline.

Sure, to have several animation/transition steps on the same target there must be several CSS classes. But they are single state to the widget and don't increase nesting inside CSS file structure if you want to animate different CSS properties.

 

In fact, developing an interface.. creating of reusable/complex widget will require animation of several targets.

Making several steps (for the same target) is not obligatory 99%.

 

Look at the experimental widget I posted above, the hover animation defined as:

      hover: [
        {
          // TITLE node
          duration: 0.4,
          to: {
            className: '+=hovered',
            ease: Bounce.easeOut
          }
        }, {
          // CONTENT node
          position: 0,
          duration: 0.4,
          to: {
            className: '+=hovered',
            ease: Power2.easeOut
          }
        }, {
          // PANEL node (container of TITLE & CONTENT)
          position: 0,
          duration: 0.6,
          to: {
            className: '+=hovered',
            ease: Power2.easeOut
          }
        }
      ],

 

 

13 hours ago, Acccent said:

And what about when you want different components of an animation to animate at different speeds? For instance, say I have a simple semi-transparent button. I want it to linearly transition to 100% opaque AND scale with a bouncy ease over 0.3s when hovered. But when I stop hovering, I want it to slowly go back to its previous opacity and scale, this time with a linear transition for both and over 0.5s instead of 0.3.

 

I don't know what means "when I stop hovering" - you can't really, stop hovering, because events are discrete. The only way it can be interpreted, that pointerenter occured, you started animation and in the process of animation (it's not finished), pointerleave occurs. It does not differ from unhover effect, which could be:

 

      unhover: [
        {
          duration: 0.4,
          to: {
            className: '-=hovered',
            ease: Power2.easeIn
          }
        }, {
          position: 0,
          duration: 0.4,
          to: {
            className: '-=hovered',
            ease: Power2.easeIn
          }
        }, {
          position: 0,
          duration: 0.4,
          to: {
            className: '-=hovered',
            ease: Power2.easeIn
          }
        }
      ],

 

But it's not, probably, what you thought about, as you were speaking about multi-step animation for the same target.

To do that, hover can be morphed into this:

 

    ...
      hover: [// timeline abstaction
        {
          // TITLE node
          group: [ // nested timeline created here
            {
              duration: 0.3,
              to: {
              	className: '+=hoverStep1',
              	ease: Bounce.easeOut
              }
            },
            {
              duration: 0.5,
              to: {
              	className: '+=hovered',
              	ease: Power0
              }
            }
          ]
        }, {
          // CONTENT node
          position: 0,
          duration: 0.4,
          to: {
            className: '+=hovered',
            ease: Power2.easeOut
          }
        }, {
          // PANEL node (container of TITLE & CONTENT)
          position: 0,
          duration: 0.6,
          to: {
            className: '+=hovered',
            ease: Power2.easeOut
          }
        }
      ],
      ...
      
      

 

This adds complexity, which is not obligatory to interface object, imo. In the CSS you will need two classes:

/* nesting for intersecting props */
.hoverStep1 {...}
.hoverStep1.hovered {...}

/* or */

/* non-intersecting props */
.hoverStep1 {...}
.hovered {...}

..and corresponding unhover queue, which reverses both classes.

 

 

13 hours ago, Acccent said:

And I want it to do a tiny "shake" animation when I click it if it's disabled. How would I achieve that with only className?

 

Okay, use manual awesome effect (in click event handler), it doesn't change any visual state..

Still, it can be defined and played the way I described above but without className.

 

 

13 hours ago, Acccent said:

Again, apologies if I misunderstood or missed something, I'm just trying to wrap my head around what you have in mind.

 

No need. Im trying to create a reusable app framework and widget library. It's not required to know how framework works if you only want to use widget. It works jquery-like. You call a function, pass data and options.. that's all. No need to install/configure lots of stuff.

 

 

 

 

 

[Element sizing with className & height:auto]

2 hours ago, Acccent said:

 

Why are there two declarations for .green-state and .red-state in your CSS? Why does a box with both .red-state and .green-state become red, not green? I mean, I understand the CSS, but isn't is it way less intuitive to do it that way? If I want a box to go from green, to red, to blue, to yellow, to purple... would I have to write 5 nested classes? Just wondering if I missed something

 

(Also, I feel like there's a lot of unneeded aggressiveness in this thread – could use some humility... but I'm no mod)

 

That are just base rules of cascade. Two classes replace one, as .class1 < .class1.class2. so, when you have .green, it's green, when you have .green.red, it's red, because two classes are bigger. It can be Less intuitive only when you create classes for multi-step animation which are not bound to the *real* state. The real state always matters something. In that example it means only "pulsing box on page load" or "awesome effect", so it's not intuitive.

 

The combined class number of 5 (.a.b.c.d.e) - can't imagine... it means that widget may have 5 states applied simultaneously.

take checkbox, it may be: hovered, checked, disabled, hidden, focused(keyboard)... but not all of them.. it may be hovered+checked, but not hovered+disabled or hovered+hidden. So, you have to, if you find out something great.

 

The nesting (.a .b .c NOT .a.b.c), may be very deep, because of DOM structure of your widget and state combinations.

You don't have to nest if you know that these class names will be unique on page.

 

 

[How can I write more concise and efficient Tweens?]

I think, you should slow-down scrolling (make it smother).

 

It can be done, if there is an option in ScrollMagic to do that. I doubt it is. https://github.com/janpaepke/ScrollMagic/issues/219