Jump to content
Search Community

Search the Community

Showing results for tags 'onload'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 3 results

  1. Hi, I'm trying to make a stagger effect on the landingpage. The idea is, that the stagger displays when the user enters the site, and then no more. The problem is when you click on a link and then get back to the landingpage. The landingpage will then reload and play the animation again (which it shouldn't). I tried with "window.onload = function(){}". This works regarding only loading once, but in regard it completely removes the wanted background (since the animation doesn't run). So, with this in mind, I should have an animation that run once, and then stays in that "after run" state. I'm thinking something like: const [hasRun, setHasRun] = useState(false); inside the onload function: setHasRun(true) But this feels a bit hacky. This is not the first time I encounter this problem, so I would really appreciate some help to solve this. Thank you very much! https://codesandbox.io/s/gsap-satgger-1usqn
  2. Dear All, Hello. I have encountered a problem regarding to StaggerTo . My case is like this: 1. I have a simple svg file stored in my firebase realtime Database as a node as below (i copied the whole file as text as paste it as string node): (I know I should write my case in CodePen but I don't know where I should put my svg as an external file for CodePen to read from. I apologize for that.) <svg onload="init(evt)" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" id="slider1Svg" > <script type="application/ecmascript"> <![CDATA[ function init(evt) { TweenMax.staggerTo($('.star'), 2, {scale:3.5, opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true, repeat:-1}, 0.2); } ]]> </script> <g id="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="72.574,123.936 71.155,123.877 70.302,125.014 69.918,123.646 68.574,123.186 69.757,122.398 69.779,120.978 70.893,121.859 72.25,121.441 71.757,122.773 "/> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="163.574,167.936 162.155,167.877 161.302,169.014 160.918,167.646 159.574,167.186 160.757,166.398 160.779,164.978 161.893,165.859 163.25,165.441 162.757,166.773 "/> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="206.574,167.936 205.155,167.877 204.302,169.014 203.918,167.646 202.574,167.186 203.757,166.398 203.779,164.978 204.893,165.859 206.25,165.441 205.757,166.773 "/> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="163.574,247.936 162.155,247.877 161.302,249.014 160.918,247.646 159.574,247.186 160.757,246.398 160.779,244.978 161.893,245.859 163.25,245.441 162.757,246.773 "/> </g> </g> </svg> You can see I am using "onload" in the opening <svg> tag. 2. Then in my javascript file, I append the node to the div like this: firebase.database().ref('svgfile').once("value", function(data){ var svg = data.val().svg; $('#container').append(svg); }) 3. My Stars Twinkle in the below browsers (all up-to-date versions and cache cleared ): Windows 10 - chrome edge MacOs - safari firefox Android - chorme opera unfortunately the stars do not twinkle in the below browsers: ipad pro chrome safari opera and I tested on my very old ipad mini with iOS version 9.35, safari, the stars also twinkle. May I ask if this is the problem caused by the OS? My goal is to match a corresponding animation code with the svg file, so I don't need to put all the animation codes into the main.js , like below: 1.svg use "code for 1.svg" 2.svg use "code for 2.svg" etc. Beside writing the animation codes in the <script> in <svg> , may I ask if there is another way I can achieve this? Thank you very much for your help. Cheers, Alex
  3. I need to make this event happen a few seconds after page loads. Can someone help? Also, the type weight is normal during transition but is bold as it should be after transition. Why? Thank you!
×
×
  • Create New...