Jump to content
Search Community

Search the Community

Showing results for tags 'width after scale'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 2 results

  1. 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.
  2. Hi, How can I get the actual width of an element after scaling it with Tweenmax? Example: $('#myDiv').width(100); // Sets width of #myDiv to 100; TweenMax.set($('#myDiv'), {scale:1.2}); console.log($('#myDiv').width()); // gives 100 instead of 120 How can I get the actual width of the div? Thanks a lot in advance, this thing is frustrating me and breaking my head today...
  • Create New...