Jump to content
Search Community

ebinabo

Members

  • Posts

    22

  • Joined

  • Last visited

 Content Type 

Posts posted by ebinabo

    Tween to Progress instead of Jump

    in GSAP

    Posted

    Hi all,

    I have a scroll trigger animation that has buttons. I want a user to click on one of the buttons and have the animation tween to that position. 

    I tried this with `.seek()` and `.progress()`, both of them jump to the particular spot.

    I would like to have the object tween to the spot instead of jump to it, I've added a small example of the current behavior

    See the Pen ExLmGwK by ebinabo (@ebinabo) on CodePen

    React Component with GSAP Not Rendering All The Time

    in GSAP

    Posted

    You might want to put this in a codesandbox since you can't put in in a codepen, so it's easier to read. However, using a useEffect hook and the refs as dependencies should work just fine. 

    useEffect(() => {
	// insert tweenmax code here
}, [arrayOfRefs])

    You might also want to pass in refs like 

    <div ref={el => ref = el}>
  {...}
</div>
   
// then you can access referenced elements as ref instead of ref.current

     

    • Like 2

    Animation - Tree growing out of ground

    in GSAP

    Posted

    You could make a few copies of the tree and move the nodes inwards to the different growth stages you require and then copy all those paths into an array and animate with morphSVG plugin which would be the best bet. It's for club greensock members tho. Otherwise you could animate with the CSSPlugin, starting from the smallest svg 

    gsap.to('.firstSVG', {attr: {path: [arrayContainingPaths]}})

    which is a lot less efficient.

    • Like 2

    Creating a Carousel

    in GSAP

    Posted

    The carousel switches the images properly but there seems to be a jank in the animation when it restarts. Opening dev tools, it shows that the opacity changes from 0 to 1 immediately instead of transitioning like the others.

    See the Pen LYGJNdY by ebinabo (@ebinabo) on CodePen

    Overlay Transiton with barba.js and gsap

    in GSAP

    Posted

    Not sure how to link multiple pages in a codepen but here's how I think this could be implemented in v2

     

    `done` is a function that's returned when the current action is complete so it's called after the tl is played and reversed.

    next.container ensures the animation doesn't reverse until the page that's being transitioned to is available

    Hope this helps

     

    const timeline = gsap.timeline({paused: true})
    timeline.to('.cover', {left: '100%',  ease: 'power2.out'})
     
    barba.init({
        transitions: [
            {
                leave: () => {
                    var done = this.async()
                    timeline.play().then(() => done())
                },
                enter: ({next}) => {
                    var done = this.async()
                    next.container && timeline.reverse().then(() => done())
                }
            }
        ]
    })

    Proper use of the bounds property for draggable

    in GSAP

    Posted

    2 hours ago, mikel said:

     

    Do you mean it should look like a filmstrip?

     

     

    @mikel yes actually, really close to this. I want the black background to be constant then the inner boxes to resemble a filmstrip and you shouldn't be able to scroll beyond the left margin of the first box and the right margin of the last. An example could be seen on limnia.com 's homepage at about 70% of the page

     

     

     

    Proper use of the bounds property for draggable

    in GSAP

    Posted

    4 hours ago, mikel said:

    Hey @ebinabo,

     

    Do not 'limit' the value left to -100.

    Try for example this

      

    

Draggable.create('.draggable', {
    bounds: {right: 0, left: -1300},
    type: 'x'
})

     

    Happy dragging ... 

    Mikel

     

     

    Hey @Mikel, I tried this and it didn't work, immediately you add for both directions the right boundary stops working

×
×
  • Create New...