Jump to content
Search Community

Mamboleoo

Members

  • Posts

    42

  • Joined

  • Last visited

 Content Type 

Posts posted by Mamboleoo

    Issue with GSDevTools

    in GSAP

    Posted

    Hey there,

    I'm currently working on some animation and I had noticed a different result in my animation if I enable the devtools or not.

    Try the demo first without the tools to see the expected behaviour. Then uncomment the lines 8-10 to have the tools enabled and you will notice at the beginning of the animation that there is a path showing up that's not their without the devtools.

     

    To explain the animation quickly: I have multiple paths that create the letter M. I clone each path and apply almost the same animation on both the original and the clone except that the original is getting a custom stroke-dasharray with to make some dots.

     

    From my investigation, we can see that the clone of the first path is getting a wrong stroke-dasharray value (174.5, 50, 10, 174.5) while it should only get 174.5px like it is without the devtools.

    What I couldn't figure out is why is this only happening on the first path, all the other are having correct values.

    And it's getting even more weird that the value it gets comes from nowhere in my code.

     

    This is obviously not a life-threatening issue as I won't need the devtools in production, but this demo is coming from an upcoming article so I'd like the readers to be able to easily replay the animation :)

     

    Cheers,

    Mamboleoo

    See the Pen e02709baf82e465d5d6f0f49090f377c?editors=0010 by Mamboleoo (@Mamboleoo) on CodePen

    MatchMedia + SVG attributes

    in GSAP

    Posted

    Hey there!

    I may have found an issue with the new matchMedia() feature and using SVG.

    If you resize the window down (under 800px) after the animation has been triggered, there is an error in the console. 

    Error: <rect> attribute transform: Expected transform function, "100".

    And if you resize it up, the animation will try to execute again but it will trigger infinite errors. 

    Uncaught TypeError: Cannot read properties of null (reading 'matrix')

     

    I have tried with other kind of SVG attributes, and they seem to work ok (fill, stroke-dashoffset,...)

     

    This issue is happening on all major browsers (Edge, Firefox, Safari)

    See the Pen bGMbjdK by Mamboleoo (@Mamboleoo) on CodePen

    • Like 2

    ScrollTrigger - Issue with SVG fill & .fromTo()

    in GSAP

    Posted

    Hey there,

    I'm working on a ScrollTrigger animation today and I'm having a really weird issue.

    See in the attached CodePen how the .fromTo() is applying the end fill colour straight ahead, which make the animation not visible.
    I have tried with different colours and it didn't help.

     

    Now here comes the funny part: If you change the viewBox values, the animation works 🤯

    See here, I updated the y value of the viewBox and you can see a result:

    See the Pen c19d1c77a30d27fee0dec5591ceb6d1e?editors=1010 by Mamboleoo (@Mamboleoo) on CodePen

     

    I've tried a couple of parameters but I can't seem to find a reason why the first demo doesn't work...

    Maybe you'll have a better idea 💚

    See the Pen b704ac9728f2c4700f0694b04150bed4?editors=1010 by Mamboleoo (@Mamboleoo) on CodePen

    • Like 1

    CustomEase on CodePen

    in GSAP

    Posted

    Hey,

    i was just checking a pen I worked on today on my phone and noticed there is an issue for the CustomEase plugin I’m loading. It is weird that I have that error on my phone as I didn’t get it while working on my computer for 2 hours. 
    I wonder if this isn’t because codepen Iframes are not on codepen.io domains? Or because I’m on mobile and not desktop?

     

    As I’m on my phone right now I can’t debug more but I’ll check on my computer tomorrow if there could be another reason for that error. 
     

    Thanks,

     Louis

    F982CB3A-3CD7-4ADB-9F98-AD7368CF5A6D.jpeg

    See the Pen NWjVNrN by Mamboleoo (@Mamboleoo) on CodePen

    SVG elements default origin

    in GSAP

    Posted

    I think there is a misunderstanding here :D 
    With GSAP default origin, it takes the "top left" of each element. While the SVG specs define the default origin to the "top left" of the viewport as written here: https://www.w3.org/TR/SVG2/coords.html#InitialCoordinateSystem

     

    I have updated my demo with a pure CSS animation, and you can see the difference where I don't set the origin (except for the last one).
    Chrome, Firefox & Safari all use the origin of the viewBox, and not the top left of my rectangles.

     

    To be honest I have no problem with this behaviour, but I was trying to understand why it didn't match with CSS animation and I don't know if it really worth adding a note in the docs as people will (I think) add a transform-origin if it doesn't work the way they expect :)

    • Like 1

    SVG elements default origin

    in GSAP

    Posted

    Yup that's precisely why I'm asking because I'm working on a small demo page for our viewBox newsletter with Cassie and I didn't understand where the "top left" value was from.

    It could come historically from the smooth origin feature but I wanted to understand why those coordinates were picked ^^

    SVG elements default origin

    in GSAP

    Posted

    Hey there,

    I'm working on a little demo with SVG and origins, and I realized that the default value for SVG element origin is not the 0,0 coordinates of the SVG (as default in most browsers).
    But it is also not the center of my elements.

    From the attached CodePen you can see that the default origin origin is the Top Left corner of each element.

     

    I was wondering where that decision was from and if it shouldn't be noted in the docs?
    https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

    See the Pen c4e7f07558496b087c7ce275973f6b52 by Mamboleoo (@Mamboleoo) on CodePen

    Force scrollTrigger to activate when reaching end of page

    in GSAP

    Posted

    The issue is that I'm not sure only the last section will have the issue.

    If you set the last section height to 100px, now the last two sections are never fading-in 😕

    See the Pen LYROwWL by Mamboleoo (@Mamboleoo) on CodePen

     

    Also I may have images in one of those sections, so the height can be wrong on page load.

    I guess this would work (if I had event listener to loaded images) 

    ScrollTrigger.create({
  trigger: "body",
  start: "bottom bottom",
  onEnter: triggerAllLeftTweens
});

     

    Force scrollTrigger to activate when reaching end of page

    in GSAP

    Posted

    Ola!

    I'm working on some basic fade-in effect with scrollTrigger and I'm encountering an issue with the last component not being displayed when reaching the end of the page.

    As  you can see from the markers, this is not an issue with the plugin, the start position of the last section is never reaching the scroll-start.

     

    To avoid this issue I've added a listener on the scroll and when reaching the end of the page, I'm forcing all the tweens to be played.

    Would there be a better alternative to this? 

    I was looking for a method from ScrollTrigger to activate it manually (e.g. tween.scrollTrigger.force()) because now the tween is being played (in my Codepen) but scrollTrigger is not cleared out.

     

    Happy holidays 🎄

    Mamboleoo

    See the Pen ZEpaxoN by Mamboleoo (@Mamboleoo) on CodePen

    Update scrollTrigger values

    in GSAP

    Posted

    Hey there,

    I have a ScrollTrigger animation with fixed start & end values
      

    const tween = gsap.fromTo(el, {
    background: 'red'
}, {
    scrollTrigger: {
        scrub: true,
        start: 0,
        end: 500
    },
    background: 'blue',
    ease: 'none'
});

    How can I update the end value on my side? Let's say after after the user opens a modal I need to update the end value to 100.

    tween.scrollTrigger.end = 100; doesn't work as it is a read-only value.

     

    I found the updateTomethod on GSAP 2.0 but it seems to have been removed on 3.0

    Thanks!

×
×
  • Create New...