Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About mheavers

  • Rank
  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,
  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 t
  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 scrollt
  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 viewpo
  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 direc
  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 unde
  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"),
  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