Search the Community
Showing results for tags 'tweenlight'.
Found 5 results
FOUC (flash of items visible before they animate on)Brand new to this, but I'm not seeing the answer out there (maybe I'm looking up the wrong terms). Anyway, I'm doing a few tests, and I'm seeing a flash of the unanimated objects before they come on. For instance, if they animate from 0% scale to 100, they appear for an instant at full size before they disappear and the animation begins. It's only local at the moment, but I see it in both chrome and firefox. I'm using jquery for selectors, and both jquery, TweenMax, and the function to animate are all being loaded in the head before any of the elements are defined in the body html. Is there a typical way to resolve this or most likely cause to look at?
How to create scroll effect like this website using greensock.
Guest posted a topic in GSAPhttps://panike.pt/sustentabilidade/ Above website has really nice animation. If you see at the left side bullets. Those bullets gets filled with red when we scroll down and hover on them. They used top and translateY css property to achieve this but I am new to greensock and trying to create using greensock. Could you please help me. Thanks
adding controller class to control playback exampleDear all, I realise this is a long shot, but I'm hoping it might work ... here's the deal. I'm learning GSAP & Java and loving it. I have the opportunity to present an idea that i'm incubating, with heavy use of GSAP & a navigational type controller (think modern version of "The Golden Compass" ) for a education programme for under privileged kids (educate & have fun at the same time) I've found a controller class that works great as an example, and am first trying to "merge" it with GSAP Control Playback Example (as http://codepen.io/GreenSock/pen/sLavi), with the principle that if I can get that to work, that's good enough for me t build my animations and present the idea. I have successfully combined both examples into a single HTML & .JS file. Both run in their own accord ... I'm now trying to bind (is that the right expression?) the GSAP buttons to the appropriate data-nav objects. The Codepen does not work, but illustrates where I have got to. I have taken id=pauseBtn and am trying to bind it to data-nav-navitemtext='Pause' object. I'm at a point where GSAP still runs, the data-nav still works, but the pauseBtn.onclick fails. I don't know if I'm trying to do the impossible, or if im missing something really obvious. I realise I should really go learn more before I try do this, but if I do I'll miss the opportunity to pitch, and hopefully help some people in need ... so as said ... a long shot, but I'd appreciate any help you can give. Thanks in advance for your time
Using GSAP to animate progressive display - 1 questionHi all, new user here. Just discovering the power of GSAP and quite amazed at what I am finding. But I have (more than) a few things I can't get my head round. Here is the context: I need on some pages to display the content in a series of steps. Each time the user presses a key the program displays another part of the page like a new div with some text and/or some images. The keypress is necessary as a confirmation that the user read the previous "step". I want to use GSAP to animate the divs into view. That's does not seem difficult starting the next div's animation on each keypress and checking is there is a running animation on the next keypress if yes then do not do anything if no the animate the next div But I also need the user to be able to skip the animation : ie if it is not the 1st time the user sees that page I would like him/her to be able to press on the keyboard in succession. If there is an animation in progress I would like to interrupt the animation and get the animated div to the position/opacity it would be at had the animation run to the end. So far I have only found kill which stops short the animation where it is at that point in time (really what the name suggests). So my page is then left with partially visible divs which is not nice and defeats my purpose. Any suggestion on how to achieve this ? Thanks in advance Didier