Jump to content
Search Community

InspireUX

Members

  • Posts

    6

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

InspireUX's Achievements

3

Reputation

  1. InspireUX
    Great, thanks for that tip @PointC. I'll give that a twirl. Cheers!
  2. InspireUX
    Okay, I'm not sure what I'm doing wrong here. The second group is not Fading in and out together. Any ideas why? https://codepen.io/jaigk/pen/NmgxXV Update: Solved it!
  3. InspireUX
    Ah yes, that's exactly what I needed to know. Thanks a lot PointC!
  4. InspireUX
    Folks, I'm a newbie and have been learning to use the Timeline for a day now. So far I've been able to build a sequence of text fading-in, but I'm not finding an easy way/command to get the text to fade out. I think I've done a hack to get the fadeOut to work, but I'd like to know the best way to get this done. All help is appreciated!
  5. InspireUX
    Thanks much for the super quick response @Dipscom I'll try these out. But right after I posted my question I found this - https://greensock.com/jump-start-js#easing I downloaded the GSAP_Jump_Start_Demos.zip and am exploring them now. Cheers!
  6. InspireUX
    Hi, I'm a newbie to using GreenSock. My level of JS and CSS knowledge is rather limited. I've purchased the PRO license as well. Using Codepen to try out the effects is great, but I'm at a loss when trying to figure out just how it all needs to be included in a HTML file. Just copy pasting the code from codepen doesn't seem to help in anyway. Are there tutorials with html (+css ) exercise files that I can take a look at and play with so I can understand how this works and use it? Here's an example of what I've tried so far, with little luck. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Html 5</title> ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css <style> body { margin:10px; } .box { display:block; width:200px; height:200px; } .green { background:green; width:200px; height:200px; } </style> </head> <body> <h2 class="title">TweenMax.to() Basic Usage</h2> <div class="box orange"></div> <div class="box grey"></div> <div class="box green"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> <script type="text/javascript"> function animateIt(){ TweenMax.to("h2.title", 1, {opacity:0.3}); TweenMax.to(".box", 3, {x:300}); TweenMax.to(".green", 3, {rotation:360, scale:0.5}); //use the defaults TweenLite.to(element, 1, {scrambleText:"THIS IS NEW TEXT"}); //or customize things: TweenLite.to(element, 1, {scrambleText:{text:"THIS IS NEW TEXT", chars:"XO", revealDelay:0.5, speed:0.3, newClass:"myClass"}}); Get an all-access pass to premium plugins, offers, and more! JOIN THE CLUB } animateIt(); </script> </body> </html>
×
×
  • Create New...