SAFARI - GSAP Problem with changing width from 100% to auto

[dzemik1111]

Note: The issue only occurs on Safari.

I wanted the user to see a large logo across the entire width of the screen upon entering my website, and after moving the cursor lower, I wanted the logo to shrink and move to the logo's location.

Sometimes (I don't know what it depends on) there is an error like in the attached video. The problem seems to me to be that GSAP is unable to handle the change from width:100% to width: auto and therefore, instead of a smooth transition, it stops at some strange height of the logo.

Here you can find video that present my problem: https://youtu.be/GbFOv4NCgrk

Here you can find my website: https://melon.studio

Here you can find JS code that animate my logo

<script>
        let mm = gsap.matchMedia();
        // use a script tag or an external JS file
        document.addEventListener("DOMContentLoaded", (event) => {
            gsap.registerPlugin(ScrollTrigger)
            // Animate From
            $("header").each(function (index) {
                let triggerElement = $(this);
                let targetElement = $(".menu-logo");
                let targetElement2 = $(".menu-logo svg");
                let tl = gsap.timeline({
                    scrollTrigger: {
                        trigger: triggerElement,
                        // trigger element - viewport
                        start: "bottom top",
                        end: "bottom bottom",
                        scrub: 1.5
                    }
                });
                mm.add("(min-width: 53rem) and (min-height: 930px)", () => {
                    tl.fromTo(targetElement, {
                        y: "0%",
                        width: "100%",
                        margin: "50px 0 0 0",
                        duration: 1
                    },
                        {
                            width: "auto",
                            margin: "0"
                        });
                });
            });
        });
        ScrollTrigger.defaults({
            markers: false
        });
    </script>

I tried to add different values in my GSAP script but nothing really helps :/ It looks like GSAP can't go from 100% to auto and stops when he is trying to calculate that.

[Rodrigo]

Hi,

 

Sorry to hear about the issues but unfortunately I don't have a Mac so I can't test.

 

What I can tell you that there is more than a handful of rendering issues reported on Safari that have not been addressed by the Safari team yet.

 

Also why are you animating from y: "0%"? since the element doesn't have any other class or style applied to that element that changes the translate value. That seems unnecessary TBH.

 

Sorry I can't be of more assistance 😞

Happy Tweening!

[GreenSock]

I'm not able to replicate the issue, but I noticed a few things: 

1. This doesn't make sense: 

   start: "bottom top",
   end: "bottom bottom",

   The bottom of the element would hit the bottom of the viewport BEFORE it hits the top, thus you're setting it up so that your start is AFTER your end (inverted). 

2. You're creating your timeline OUTSIDE of your matchMedia(), and adding a tween inside. That's generally a bad idea - don't you want it to clean up the whole timeline if that matchMedia() reverts? I mean what's the point of you creating an empty timeline when that matchMedia() doesn't match anyway? 

3. Instead of animating to width: auto (which isn't even numeric, making it difficult to interpolate), why not make it a function-based value that you calculate a pixel value on? Or better yet, since it just conforms to the child <svg> which you explicitly set to 137px, why not animate to that specific value? 

4. I would not recommend animating the generic "margin" value because that is composed of several values. Instead, animate the individual parts that you want. 

   // BAD
   margin: "50px 0 0 0"
   
   // GOOD
   marginTop: "50px"

 

I hope that helps.