Jump to content
Search Community

popland

Members

  • Posts

    47

  • Joined

  • Last visited

 Content Type 

Posts posted by popland

    ScrollTriggrer inside a pinned scrolltrigger

    in GSAP

    Posted

    I'm trying to make a "pinned" section structure (as for the example in documentation), it works pretty good, unless i add something inside a section and i animate it with another scrolltrigger.
    First section is correct, also the scrolltrigger animation of its content, but when i reach the second section a "blank" with the size of the page itslelf appear on the left. If i remove the scrolltrigger animation inside everything is working correctly

    at this url you can see an example:

    https://codesandbox.io/p/github/popeating/next.popland.it/draft/dank-sunset

    as you can see the "hello" text is growing as you scroll, but when the second section take over, the horizontal bar appear 

     gsap.to(".txt", {
        scrollTrigger: {
          trigger: ".txt",
          scrub: true,
          start: "middle top",
          markers: true,
          pin: true,
          pinSpacing: false,
        },
        scale: 6,
        duration: 1,
      });
     

    if i comment or remove the code above and it works again (i also tried to modify it with various pin combination with no luck)

     

    i guess there is something about having a scrolltrigger inside a pinned scrolltrigger that i cant figure out 

     

    any suggestion?

    Different behaviour on chrome and firefox when animating svg

    in GSAP

    Posted

    hello @Cassie

    i know this is not a GSAP issue, but since i'm animating the svg with gsap, maybe someone already faced the issue

    this is codepen demo i made:

    See the Pen GRyvBEa by lenna-the-vuer (@lenna-the-vuer) on CodePen

    in chrome it works as expected, in firefox not really, and im really scared to watch it in safari

     

    in firefox transform-origin is supported but "Keywords and percentages refer to the canvas instead of the object itself", so i think i cant achieve a total compatibility in animation

    Different behaviour on chrome and firefox when animating svg

    in GSAP

    Posted

    In a page i am animating an SVG logo that work as a mask to reveal the content of the page

    the animation is pretty basic: i center the svg logo on the page, make it bigger and then even more bigger until the page is totally in view:

     

    gsap.set('#yes', {
          transformOrigin: 'center',
          scale: 1,
          x: window.innerWidth / 2,
          y: window.innerHeight / 2,
        });
        gsap.to('#yes', {
          transformOrigin: 'center',
          scale: 15,
          duration: 1,
          ease: 'power4.easeInOut',
        });
        gsap.to('#yes', {
          scale: 350,
          transformOrigin: 'right',
          duration: 0.7,
          delay: 1,
        });

     

    but it looks like firefox and chrome interpret the transform orgin differently (and safari too)

    you can have a look here with both browser: https://paca.popland.it

    of course the chrome version is the correct one

     

    any way (besides making the animation browser dependant which i found hard to mantain) to make it work the same way? or at least in a way that firefox works a little better

     

    thank you

    Animating an SVG masp

    in GSAP

    Posted

    Thank you @GreenSock in fact bottom-left stayed there as an experiment (i was looking for center)

    using your suggestion it works almost perfectly (the problem now is the SVG that no matter how big it is, it keeps a "white" part in the middle :D)

    Anyway what was interesting is the concept, i will deal with SVG shape later

    or (but i dont think its possible) i will fade away the clipPath once big enough

     

    At the moment i'm quiete satisfied with the animation i came up, i will try to implement on the live site too

     

    Animating an SVG masp

    in GSAP

    Posted

    Thank you!

    my goal is a bit more complex, on the first page load i need the page to be revealed by the growing logo, the page page is actually a slider...

    at the moment the page is revelaed by a simple clip-path in two steps, (you can see an example here: https://paca.popland.it) with a basic timeline like this (when you get back to home the effect is not repeated):

    const tl = gsap.timeline();
        tl.to('.homeSlider', {
          'clip-path': 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 100%)',
          duration: 0.8,
          ease: 'power4.easeInOut',
        }).to(
          '.homeSlider',
          {
            'clip-path': 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
            duration: 0.6,
            ease: 'power4.easeInOut',
          },
          '-=.3'
        );

     

    its not bad, but since i have the logo in SVG format a zooming logo reveal would be nice

    Animating an SVG masp

    in GSAP

    Posted

    Hello all, i am trying to animate an SVG clipPath (to reveal an underlying image)

    in the pen you can see how i placed the the SVG over the image, but it looks the "#yes" id (the clipPath) can't be easily animated (i did not attached a gsap animation yet, but manuallly updating the css does not get the wished result); i would like to scale the SVG from the center of the image, from 0 to big enought to show the whole image

    i read all the posts about the SVG, but no luck yet

    See the Pen GRyvBEa by lenna-the-vuer (@lenna-the-vuer) on CodePen

    Random animations

    in GSAP

    Posted

    @Cassie

    thank you, that's a good solution, probably the only one (even if i dont like spread operators in my code... they look so unclean!)

    already tried in my project and it works perfectly

    thanks again!

     

    • Like 1

    Random animations

    in GSAP

    Posted

    Thank you @mikel

    of course adding more option is always fun (and i really like the menu -> close text animation)

    the solution you posted its very similar to mine, where you have a random label (i got a random number) and play the random labelled function

    and its ok for most of the part, especially if the animation are really very different.

    anyway if you want to add a menuToBottom (for example), you have to make a new timeline for it even if the differences are minimal (in my case, one is with a y animation and one is with a x animation)

    so, having the animation itself as random return can be useful (for example i can have 'x:100' but also 'opacity:0' to switch from)

    i hope my explanation make sense, i know it is a bit confused

    in my mind a thing like 

    var val="x:-100%"
tl.to('#selector',{val, duration:1}) 

     

    where val can be any animation value (x:-100%, opacity:0, y:100% and so on) gotten from a random, would be great

     

     

    Random animations

    in GSAP

    Posted

    i made a pen sample here:

    See the Pen popJbYO by lenna-the-vuer (@lenna-the-vuer) on CodePen

     

    its just the basic, as you can see, when you click the close, the overlay disappear on top or on left, based on a random number and an if statement, this is working but not so flexible, since if i need to add more options i need to make more numbers, increase the ifs, increase the tl.to animations...

     

    so i wish i could use the GSAP random utils, to set the animations itself ("x:'100%", "y:'-100%", and more as needed) and passing the return value from the random to the tl.to itself

    Random animations

    in GSAP

    Posted

    Thank you @Cassie,

    this will randomize the y (so it disappear moving to top or moving to bottom)

    my goal i sto have it disappear to the left or to the top (disappearing to top  tl.to('#fullmenu', {y:'-100%', duration:0.2})and disappearing to the left tl.to('#fullmenu', {x:'100%', duration:0.2})), at the moment i am obtaining it by having two functions (one for each animation) and when i click the closing button i execute one of them at random. This is ok at the moment, but if i want to add a new closing animation i have to write a new function and so on, so i was thinking, can the "animation values" part of gsap (x:'100%' or even opacity:1) passed as a variable?

     

    Random animations

    in GSAP

    Posted

    I got a (basic) screen overlay that on some clicks come from the left and cover the full page, it uses something like

    var tl = gsap.timeline();
     tl.to('#fullmenu', { x: 0, duration: 0.2 });

     

    Then i have a its closer, that basically move the overaly to the top out of the screen and reset it on the full left

    var tl = gsap.timeline();
    tl.to('#fullmenu', { y: '-100%', duration: 0.2 });
     tl.set('#fullmenu', { y: '0', x: '100%' });

     

    I would like to have the closer animation to be a bit more "random", so that when it closes it could disappear moving to the top or the left, my first idea wast to make 2 closer function and randomize its usage (for example closeToTop() and closeToLeft()). But i was thinking if this could be the case to use the random GSAP function, so that the animation of the closer

    tl.to('#fullmenu', { y: '-100%', duration: 0.2 });

     

    could get a random to (y:'-100%' or x:'-100%' or even more if needed), can it be done? for example i tried with  an array like

     

    const anim=gsap.utils.random(["y:'-100%'", x:'100%']);

     

    and then use it like:

    tl.to('#fullmenu',{anim, duration:0.2}

     

    but it is not working, giving me the following error:

    Invalid property anim set to x:'-100%' Missing plugin? 

    or 

    Invalid property anim set to y:'-100%' Missing plugin? 

     

    any suggestion?

     

     

     

    Asymmetrical clip path animation

    in GSAP

    Posted

    thank you

    i tried chaining tweens on a timeline, but i wasnt thinking like in your example (that approximate really well what i was tinking), my approach was animating bottom corners in a tween and top ones in the other, but i realized that every clip path amimation should have all four corners.

    So, i guess your solution could be thr best i can do, even if it is tied to position instead than time

     

    thank you

    Asymmetrical clip path animation

    in GSAP

    Posted

    I have a basic image reveal with clip path, but it's quiete boring, the clip path is a square (4 points) that starts "compressed" in the middle and it animates the corners torward the edge of the container/image (if you see the demo, you probably better understand than my explanation)

    as i said the animation is quiete basic, so i was thinking to improve (at least for my taste) having the bottom points starting its animation a little earlier and the top ones to catch up later but it looks i can't decouple top and bottom corners in clip-path, at least i can't find a solution!

     

    any idea?

    See the Pen OJboeLY by lenna-the-vuer (@lenna-the-vuer) on CodePen

    Animation resizing

    in GSAP

    Posted

    my bug looks like here:

    See the Pen RwoVBgW by lenna-the-vuer (@lenna-the-vuer) on CodePen

     

    if you resize while the animatio is going (start the resize and leave the resize before the animation ends), the alignement break up

    if, while resizing you wait the end of animation before leaving the resize handle, the slider revert to the first image and line up correctly, but you should "leave" the resizing before it restart

    so that's why i was thingking to suspend the animation while resizing and resuming it at the end

    Animation resizing

    in GSAP

    Posted

    it looks that somethimes it works and sometimes it doesnt (so it does not work)

    i move also  

    gsap.set(imgObj, {
          x: function (i) {
            return i * boxWidth;
          },
        });

    inside the recalc function, and seems to work, but it is not

     

    your example still got my problem, when resizing white bars appears and images overlap

    Animation resizing

    in GSAP

    Posted

    I got the following slider that is working quiete correctly (still need to bind the next/prev button but that is not my concern)

    the images slides by the size of the container box and get wrapped so that the loop is infinite

    the size of container box is calculated at startup with  

     let boxWidth = gsap.getProperty(container, 'width');

    and i need to recalculate it when the window is resized, i attached a listener to the resize and with the function i can recalculate the new box width 

    function recalc() {
        console.log(gsap.getProperty(container, 'width'));
        boxWidth = gsap.getProperty(container, 'width');
      }

    but it looks the newly calculated width is ignored by my animation function that is already running via a delayedcall

     

    how can i reset the animation and have it restarted correctly with the new width?

    See the Pen WNbmvgB by lenna-the-vuer (@lenna-the-vuer) on CodePen

1
2
Page 1 of 2  
×
×
  • Create New...