Teun87

Ok, great. Will take a look at it!

Hi everyone, I did create the following code and it is working. Now I want to 'bundle' all this code and trigger it when the SVG is in the viewport. I'm looking for a really simple solution and hope I don't have to use a library like ScrollMagic (I've already tried, but can't get it to work). The code is: var charges = ["#charge-7", "#charge-6", "#charge-5", "#charge-4", "#charge-3", "#charge-2", "#charge-1"]; var hours = ["#hours-1", "#hours-2", "#hours-3", "#hours-4", "#hours-5", "#hours-6"]; TweenMax.staggerTo(charges, .3, {opacity:0}, 0.3); TweenMax.to("#hours-indicator", .3, {visibility: 'visible'}); TweenMax.staggerFrom(hours, .3, {visibility:'visible', immediateRender:false}, 0.3); TweenMax.to("#hours-7", .3, {visibility: 'visible', delay: 1.8}); TweenMax.to("#clock-hands-minutes", 1.8, {rotation:2520, transformOrigin:'bottom center', ease: Power0.easeNone}); TweenMax.to("#clock-hands-hours", 1.8, {rotation:180, transformOrigin:'bottom left', ease: Power0.easeNone}); Some animations need to play in sync. Problem with ScrollMagic is that it looks I can only add a timeline or single TweenMax in the ScrollMagic setTween-function, which is causing the different animations to only play after each other instead of simultaneously. I've looked here on the forum but couldn't find an similar case. Help or a small snippet would be welcome THANKS!

Thanks @Sahil for the reply and answer! With the hints and tips I managed to make it work!

var hours = ["#hours-1", "#hours-2", "#hours-3", "#hours-4", "#hours-5", "#hours-6", "#hours-7"]; TweenMax.staggerTo(charges, .3, {opacity:0}, 0.3); TweenMax.staggerFromTo(hours, 1, {visibility:'visible'}, {visibility:'hidden'}, 0.3); Please check the snippet above. My question is simple: Now every item with id hour-XX immediately is visible, although I did set a visibility: hidden in the CSS by default. How can I set the hours to only be visible for .3s via the staggerFromTo function and afterwards be hidden again? Thanks, Teun

I'm totally new to Greensock. This is what I want to make: Fix a title in a website as long as it is in the viewport. It starts on a background image and needs to be white. As the visitor scrolls the title must be fixed until the point it reaches a certain offset. The title smoothly needs to change it's color from white to dark blue along the scrolling animation. Anyone any snippets or links? Don't know where to start (quickly). Is Tweenlite the best option? Regards, Teun

Thanks, but we're planning to build this from the ground up. Without making use of any extra applications.

Hi everybody, At the moment we are looking for the best options/frameworks to create an interactive map with JS, HTML and CSS. At this point we're also considering to implement small animations. Since we do not have a lot of experience I would love to hear your opinion about the following: The idea is to create a static (SVG) map with interactive buildings on it (with animated hover state). When you click on it a panel with more information and follow-up pages comes sliding in. Would GreenSock form a good base to setup the interactive map? We need to be able to select the buildings based on inside and outside-map clicks. More ideas or suggestions? Please! Kind regards, Teun