Jump to content
Search Community

pr1ntr

Members

  • Posts

    13

  • Joined

  • Last visited

 Content Type 

Posts posted by pr1ntr

    Can't seem to get timeline with scrollTrigger to actually scroll the document when using tweenTo

    in GSAP

    Posted

    I have a timeline kinda with a scrollTrigger attached. I am doing something like 

    mainTimeline.current = gsap.timeline({
  scrollTrigger: {
    trigger: containerRef.current,
    start: 'top top',
    end: 'bottom bottom',
    onSnapComplete,
    snap: {
      snapTo: 'labelsDirectional',
      duration: { min: 0.5, max: 3 },
    },
    scrub: true,
    onUpdate,
  },
})

    and then at some predetermined point I want to do this 

    mainTimeline.current.tweenTo(pathLabel, { duration: 1 })

    However, while this does initiate the scroll animations, it does not actually scroll the page. Am I missing something?

    NS_ERROR_FAILURE with TweenMax, SVG and Firefox

    in GSAP

    Posted

    I am having this same issue now. However the SVG is inlined to the DOM and is not under any circumstance display:none in any of its parents. Its really pissing me off. The weird thing is in this codepen it works fine:

     

    See the Pen MarYZr?editors=101 by pr1nt_r (@pr1nt_r) on CodePen

     

    But on my site it NS_ERROR_FAILURE. I can't for the life of me figure out what is going on. Is there anything you guys can think of at all that could cause this if not the display:none issue?

     

    btw its pretty much impossible to debug GSAP midtween :( I had to go turning every tween off/on to figure out which one it was to even isolate the code that was producing it.

     

    Maybe adding some error handling that identified the element selector being tweened?

    Nested Paused Timeline or Tween instances don't play in parent timeline

    in GSAP

    Posted

    I totally understand the reasoning behind not "assuming" things. I have to stop myself from that all the time. But just for fun, here is my use case. So I have an animation in which is comprised of 4-5 distinct timelines that control what happens in some sequence. The sequence of these timelines varies upon the "in" or "out" of the total animation. so if the animation is going out I have to rearrange these timelines. What I tried to do initially is create all timelines in a paused state  and assign them to vars of some object that is in charge of managing them. Then every time I want to animate in, I create a new timeline and add those tweens to it in a particular order. When I want them to animate out I add them to another tween in reverse an then reverse that timeline. What I had expected is as soon as I added them to another tween they would inherit that tweens paused state. Since the parent tween is ultimately in charge of playback of its children it seemed rational that it would override whatever paused state they had. What I had resolved to do was just remake each timeline every time I wanted to animate in an an out. I guess I don't feel terribly comfortable with constantly instantiating tweens, but I have gotten over it for the most part as I am assured that the tweens GC very well. The profiler also confirms this. I figured it may be easier to manage the same instance of the tweens. Thanks for your input guys.

    Draggable.onThrowUpdate stops other timelines?

    in GSAP

    Posted

    I have a draggable instance that is responsive for page scrolling on tablet devices. 

    When the onDrag events fire it runs a function that updates stuff on the page with its current position (0-1) and scrollTop/y  to a method that delegates this information to tell stuff to parallax or trigger if it has gotten far enough down the page. 

     

    A problem is starting to present that when onDrag fires this update method everything parallaxes fine however when onThrowUpdate runs it stops this particular parallax animation.

     

    I think it may have something to do with how the animations is run. Here is the code

     

     

    tweenParallax = (pos,tween,min,max,dur) ->
    amount = ((pos / max) * 1) * dur
    
    
    if pos <= max and pos >= min
        tween.tweenTo amount , 
            overwrite:'all'
            ease:Quad.easeOut


module.exports.clouds = (setId, min, max, dur) ->

    minPos = min
    maxPos = max
    duration = dur
    
    $el = $(".clouds#{setId}")    
    clouds = $el.find(".cloud")
    
    tween = new TimelineMax
    
    tween.add TweenMax.to clouds , duration , 
        y:"+=400"
        
    tween.paused(true)
    
    
    
    
    return (pos) ->
        tweenParallax pos , tween , minPos, maxPos, duration
            
     
    pardon my coffee. Let mek now if you need a codepen, it may take some time to set one up.
×
×
  • Create New...