Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by determin1st

  1. you can also try: https://css-tricks.com/almanac/properties/o/object-fit/
  2. with some new specs, you can do: https://github.com/eeeps/eleventy-respimg
  3. probably, you could .progress(0)/seek(0) on that animation.. set() is adding zero duration tweens.. which is somehow diverges syntactically from the intention.
  4. from the beginning of what?
  5. determin1st

    My first Tween

    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..
  6. 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?
  7. determin1st

    My first Tween

    try creating a timeline for sequencing. onComplete is for different things.
  8. 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.
  9. you dont animate image or it's container in that demo, so the question is unclear, imo.
  10. 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()...
  11. 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...
  12. 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.
  13. 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.
  14. Sure, I see your logic and I can argue that, but as you said it's about intuition, okay, let it be.
  15. 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.
  16. Is there any reason why .invalidate() is not done automaticly when .play() happens?
  17. Does 'onUpdate' happens after or before the tweening values update?
  18. Checkout this line: https://github.com/determin1st/redsock/blob/66280c2f1aa6cc500f8478ca01a35faae8640d97/TweenMax.js#L7255 https://github.com/determin1st/redsock/blob/66280c2f1aa6cc500f8478ca01a35faae8640d97/TweenMax.js#L7255
  19. I don't suggest. Just answering. It's not easier, it's more flexible. We do different things.
  20. 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. 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 } } ], 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. 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. 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.
  21. 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.
  22. 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