Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by mheavers

  1. What a thorough and kind response! I learned a lot. Thanks
  2. Hi - I'm not sure why but I can't get a simple color tween working, and I can't seem to find anything in the documentation that explains it. I've created a codepen here with what I feel should be the proper implementation. https://codepen.io/heaversm/pen/poyXmXg
  3. Yes! Didn't think to add it at the end with a negative offset. I did read that article - which is where I learned about the absolute position param. Thanks for the tips!
  4. Hi - I'm trying to insert a timeline animation, in conjunction with the scrollTrigger plugin, into an already established set of animations, without having it affect the timing of those animations. In other words it should occur at a certain point in the scrolling sequence, but "span" as many of those sequence items as it needs to without postponing their execution. But right now that's exactly what it's doing. Here's a portion of my timeline: tlRetouch .from(".fixed-section.retouch", { autoAlpha: 0, duration: 2 }, "retouchIn") .from( ".retouch-1", { scale: 1.2, }, "retouchIn" ) .fromTo('.retouch-content-container',{translateY: 100}, {translateY: -100, duration: 7}, 0) //this is what I want to insert .to('.brushes-content-container',{ translateY: -300, autoAlpha: 0, duration: 2},"retouchIn") .to( ".retouch-2", { width: `${appState.screenDims.width}px`, }, "sliderIn" ) .from( ".retouch-title-line.l1", { autoAlpha: 0, translateY: 20 }, "sliderIn" ) And the line I am inserting is the `.fromTo('.retouch-content-container',{translateY: 100}, {translateY: -100, duration: 7}, 0) ` animation - it should start at the start of this timeline, and go for the duration without affecting any of the following labels (e.g. `sliderIn`). What's the best way to make this happen? I thought that using the number (`0`) as an "absolute time" would make that happen, but it didn't work.
  5. Thanks @ZachSaucier - that's actually really helpful, and resolved my issue. And while it's working - I think I'm unclear then on how either scrollTrigger automagically knows, or whether I somehow got lucky, in determining when to scroll out the previous section once the following section is overlaid. For example, I just set a somewhat arbitrary "end" duration for my scenes: end: `+=${sceneConfig.scenes.transform.sceneDuration * appState.screenDims.height}`, // end after scrolling this distance but if I look at the DOM, I can tell see that once <section2> is pinned to the top of the screen, <section1> begins to scroll out. But nowhere in code did I specify "wait for section2 to enter".
  6. Ok - will do. Might take a bit of time to strip this down enough to put in a codepen.
  7. Hi - maybe what I didn't make clear is that I want to know when a particular tween within the timeline is triggered, not the whole timeline itself. Notice that the code was a callback on a timeline item. So, essentially using something like ScrollTrigger's "onEnterBack" method: tl = gsap.timeline({...}) tl.from( ".item1", { autoAlpha: 0, onStart: function(){ //do one thing }, onEnterBack: function(){ //do another thing }, }, "label1" ); I want to know when a labeled animation sequence begins occurring in reverse, not simply when the whole scrolltrigger sequence begins occuring in reverse
  8. Hi - I think I'm either misunderstanding the scroll trigger "end" rules or structuring my html / css in a way that pinning is not working... I want to achieve what the "layered pinning" example in this codepen does - content from one section overlays that of another. My scrollTrigger is set up as follows: tl = gsap.timeline({ // yes, we can add it to an entire timeline! scrollTrigger: { trigger: "#section-transform", pin: true, // pin the trigger element while active? start: "top top", // when the top of the trigger hits the top of the viewport endTrigger: "#section-brushes", //end: `+=${sceneConfig.transform.sceneDuration * screenDims.height}`, // end after scrolling this distance end: `top top`, // end after scrolling this distance scrub: true, // smooth scrubbing, e.g. '1' takes 1 second to "catch up" to the scrollbar. `true` is a direct 1:1 between scrollbar and anim //onUpdate: onScrollUpdate, }, }); My understanding of this is that when the top of `#section-brushes` hits the top of the viewport, it will release the pinning of the previous section (`#section-transform). the `<section>` elements are two concurrent dom elements. It actually seems like no matter what I put for the `end` value, the resulting `pin-spacer` is always the same height...
  9. Can't seem to find any documentation on this, but hoping there's a relatively easy way to solve it - I'm using scrollTrigger to control a timeline. When a label is entered from the forward direction (scrolling down), I want to trigger one event, but when it is entered from the reverse direction (scrolling back up), I want to trigger another event. The forward direction is easy enough, because of the `onStart` event, but I can't seem to find an `onReverse` event (though I see `onReverseComplete`). I know that I could do an `onUpdate` event of the animation and check the scroll direction, and do some sort of flag to prevent the event from triggering multiple times, but is there a singular event that is fired that would accomplish this more easily? I saw some documentation for TimelineMax that has an `addCallback` method where you can specify a frame label that triggers the callback, but maybe that has been deprecated or is not usable with GSAP Timeline (I get `addCallback is not defined`)? If it does exist, that would work for my purposes. Here's essentially what I want to accomplish: tl.from( ".item1", { autoAlpha: 0, onStart: function(){ //do one thing }, onReverse: function(){ //do another thing }, }, "label1" );
  10. Hi - I'm using GSAP's timeline, and I can successfully get the overall timeline's progress, but I want to get the progress of a specific tween within that timeline. How do I do this? This is my code: ``` tl = gsap.timeline({ // yes, we can add it to an entire timeline! scrollTrigger: { ... onUpdate: (timeline)=>{ console.log(timeline.progress); //this works }), }, }); tl.from(".transform-title", { autoAlpha: 0, translateY: 20, onUpdate: (thisTween)=>{ console.log(thisTween.progress) //this doesn't. are no parameters passed onUpdate? (thisTween undefined) } }, "start"); ``` Seems like the timeline as a whole is passing a reference to itself as a parameter to the onUpdate function so that I can get progress of the timeline as a whole, but the individual tweens are not.
  11. Hi - I am trying to troubleshoot some animation stuttering in an app we built. I decided to include GSAP jQuery plugin to see if it would make a difference, but I'm not sure it's even being utilized over jQuery's native animate. How do I know? I include the library: <script src="script/vendor/TweenMax/TweenMax.min.js"></script> <script src="script/vendor/jquery/jquery.gsap.min.js"></script> Then here's a typical animation call: $(obj).stop().animate({ rgb: 127 }, { duration: 2000, easing: (Constants.CUSTOM_EASE ? Constants.EASE : "easeOutQuart"), step: function() { var rgb = ~~ obj.rgb; self.drawArrow(rgb * 65536 + rgb * 256 + rgb); } }); As far as judging performance, is there a good, definitive way to see which is operating faster? I have Chrome Dev Tools FPS counter open, but both platforms seem to operate mostly at 60fps in the counter, with the occasional (severe) dropoff - which is what I'm trying to solve for.
  12. I have a button which inverts the colors on my website. It utilizes a plugin called rgb color - http://www.phpied.co...-in-javascript/ to get the color value of all dom elements, and invert them. I'm doing that with the code below: invertColors: function(){ var colorProperties = ['color', 'background-color']; //iterate through every element $('*').each(function() { var color = null; for (var prop in colorProperties) { prop = colorProperties[prop]; if (!$(this).css(prop)) continue; //if we can't find this property or it's null, continue color = new RGBColor($(this).css(prop)); //create RGBColor object if (color.ok) { //good to go, build RGB var element = $(this); $(this).css(prop, 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')'); //subtract each color component from 255 } color = null; //some cleanup } //end each for prop in colorproperties }); //end each } //end invert colors What I'd like to do is rather than just flip the color, tween it. I'm curious to try the greensock tweening engine. So supposedly, I should be able to make a call something like this: TweenLite.to(element, 1, {css:{prop:'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')' }, ease:Power2.easeOut}); but this is not working (no errors are thrown), so I'm not sure what I'm doing wrong. Anyone have any ideas for how to get this working, or what the proper way to tween all of these color properties would be?