Search the Community
Showing results for tags 'basic'.
Found 5 results
-
Hello everyone! To start off I'd like to say that I'm very new to GSAP, came from using Framer Motion and fell in love instantly, I'm having a blast using it. I've been mostly creating animated UI components like menus, buttons, search bars etc that morph into different states, changing size, opacity etc. One thing I like to do is to set up unique animations for each state change. For example: I have button, a timeline that triggers when I hover on it, and another timeline that triggers when the mouse leaves the component. Slightly different easing and duration, same for opening and closing menus. One problem I have though, is if I rapidly trigger the animations, for example opening and closing a menu with keyboard shortcuts quickly and repeatedly , or moving the mouse quickly and continuously over the hover element, my animations tend to bug out for some reason. In the case of the hover animation, lets say even though the cursor ultimately left the element, it is stuck at the hover state. Hope my explanation makes sense. I tried multiple things, like .kill the opening timeline with the closing timeline and vice versa, in React I tried adding a state variable and trigger the timeline conditionally only if we're in the correct state but nothing seems to have solved it. My guess is somehow I queue up too many animations and since the timelines are never the same length, once the short one resolves we still see the end of the longer one? I'm sure this is something very basic and apologies if this have been discussed a million times before, but I would really appreciate any sort of insight, best practices or solutions when working with multiple timelines on the same component. Thank you very much!
-
Hello, I would like to know if we can create a retro game using GSAP? Is it really possible for beginners to create their own basic game using GSAP? Even without physics in the game just to control the character only. Or even control a snake in the snake game. Anyone tried to create a game using GSAP? Can you please share it?
-
Hi guys! I want to share my work on how to make a venetian effect using GSAP I hope it will help other guys on their animation! You can freely fork this project on codepen! thanks! Any feedback and improvements are welcome! Codepen Link: http://codepen.io/Waren_Gonzaga/pen/akywzY Big thanks to Jonathan and Jack of GreenSock for guiding me here! Pretty new here!
-
Hi. I am new to gsap and like to reproduce the simplest splitText Example from the SpitText Introducing Video: http://greensock.com/SplitText This runs in codepen http://codepen.io/anon/pen/LVrzxN?editors=101 But not on my local machine. Why not? The SplitText.min.js File is loaded local. An thats what it looks like in Chrome.
-
<!DOCTYPE html> <html> <head> <title>tween-test</title> <meta charset="utf-8" content="text/html"> <script src="js/video.js" type="text/javascript"></script> <script src="js/TweenMax.js" type="text/javascript"></script> <script src="js/jquery.gsap.js" type="text/javascript"></script> <script src="js/CSSPlugin.js" type="text/javascript"></script> </head> <body> <style type="text/css"> body { background-image:url('images/bg_main.jpg'); } </style> <p> <span id="test-1">C</span> <span id="test-2">O</span> <span id="test-3">T</span> <span id="test-4">Y</span> </p> <script type="text/javascript"> $(function(){ var testing; testing = $("#test-1"); TweenMax.from(testing, 4,{css:{ top:"-300px" }}); }); </script> </body> </html> I am VERY new, so it is probably something really basic, but I can not figure it out for the life of me. Thanks in advance.
