Jump to content
Search Community

SoL2Squiz

Members

  • Posts

    18

  • Joined

  • Last visited

 Content Type 

Posts posted by SoL2Squiz

    Sprite Animation - (Not Working Properly)

    in GSAP

    Posted

    Hi SoL2Squiz  :)

     

    It looks like Dipscom has solved your sprite sheet problem, but I thought I'd throw my 2 cents worth out there for you.

     

    Sometimes a sprite sheet may be the best solution, but you may want to look at SVGs for this type of animation. They offer so many advantages like responsive scaling, making easy changes to the text, smoother animations, color changes for your data... and the list goes on. In your example you have 12 pieces of text, some circles, a rectangle and one path. This works perfectly as a SVG. I made a little CodePen for you using the SVG instead of your sprite sheet. The SVG is about 3KB whereas the sprite sheet is 249KB and offers no way to change it.

     

    See the Pen yOvOLO by PointC (@PointC) on CodePen

     

    Just my opinion, but hopefully it gives you some new ideas. 

     

    Happy tweening

    :)

    Hi,

     

    I'm a supernoob and after looking at your sample, I think I need a more coffee hehehehehe! I'm blown away :) Thanks

    Sprite Animation - (Not Working Properly)

    in GSAP

    Posted

    Hi SoL2Squiz,

     

    Basically, your JS is failing because you are trying to load a JS file in CodePen that does not exist. 

    <script src="js/main.js"></script> // This will fail in CodePen and break your Pen. Remove it and it will work.

    Also, there is no need to add the CDN link in CodePen, you can add GSAP's library via CodePen's "Add External JavaScript" under the "Settings". Look for the button that says: "Quick-add".

     

    After that, all that is left is to adjust your Tweening code. Look at the fork I made from your Pen, I also had to adjust some of your numbers that were a bit off.

    See the Pen jqZPdm by dipscom (@dipscom) on CodePen

    One last comment: If you are going to animate sprite sheets, you need to make sure the colors in the sprite sheet match exactly from one sprite to another. JPG is a rather bad file format for this as it creates slightly different shades of colors depending on the surrounding color per pixel. Look at the pen, watch how the graph flickers as it animates. You really want to use something like GIF or PNG for this sort of job.

     

    Hi,

     

    Thanks for the info on "Quick-add" option for the CDN. That made a lot of sense. About the jpeg, yes you were right, in my final version, I used PNG format for each frame.

     

    Thank you

    SPRITE ANIMATION - Failed Attempt

    in GSAP

    Posted

    Hi,

     

    For adding a new sprite animation use an onComplete callback on the timeilne, only if the timeline doesn't have a repeat:-1, in that case the timeline is set for an endless loop and will never complete, in that case you can use a call() method at a certain position in the timeline.

     

    For the second question, for what can I see, the timeline you're using is not paused or it's timeScale is not set to 0. The code you add simply tweens the timeScale property of the animation, just that.

     

    I'm not completely sure of what you're after here. I forked your codepen and made some changes to it, please check it and adapt it to fit your scenario so we can follow up properly:

     

    See the Pen bpoWzL by rhernando (@rhernando) on CodePen

     

    I wanted to start another animation after the first animation is finished. that's why I tried to remove all the extra codes to see how the basic works :)

    SPRITE ANIMATION - Failed Attempt

    in GSAP

    Posted

    I have another question, I removed this code block below

     

    function timeScale(X) {

      TweenLite.to([sprite01], 1, {
        timeScale: X
      });
    };
     
    and the animation still goes one; i thought the function calls the variable?

    SPRITE ANIMATION - Failed Attempt

    in GSAP

    Posted

    Hi @Diaco @Jonathan, 

     

    Thank you responding to my post. I was to realize my mistake now. However, if have one last question about the sequence. How will I add another "sprite animation" in the same page that will load after the first animation is finished?

    SPRITE ANIMATION - Failed Attempt

    in GSAP

    Posted

     

    Hi SoL2Squiz  :)

     

    var animate = TweenMax.to('.MySprite2', 1, {
  repeat: -1, // >> loops the sprite ( -1 = infinity loop )
  x: -2250, //  >> -( width - width/frame )
  ease: SteppedEase.config(15) // >> total frame - 1
});
     
    pls load TweenMax too 

     

    so I just did not load the TweenMax? what is wrong with the code itself? I cannot seem to see what's the difference. NOOB mistake!!! LOL

    SPRITE ANIMATION - Failed Attempt

    in GSAP

    Posted

    Hello Guys,

     

    I am trying to understand how SPRITE ANIMATION works using GSAP and found this example which is exactly what I have in mind.

    See the Pen MYdwRP by MAW (@MAW) on CodePen

     

    Now, I tried to simplify the whole code by removing those that I don't need. (My only purpose was to PLAY a simple animation for my project). But for some reason, I screwed things up. I do not know what happened after this.......

     

     

     

     

    Thank you!!

     

     

    See the Pen WwEmbY by BUroKHUli (@BUroKHUli) on CodePen

    Masking Your Images in GSAP?

    in GSAP

    Posted

    Hi,

     

    When I was still working with FLASH, it's so easy to HIDE/UNHIDE assets using masking. This way, I can declare a certain dimension of stage wherein only that area will I be able to show the animation.

     

    In GSAP, is there a way to like mask images?

     

    E.G.: my working stage is only set to 500px by 500px, anything outside that dimension will be hidden?

     

     

     

    Thanks

    TweenMax.to + Opacity 0?

    in GSAP

    Posted

    Hey SoL2Squiz,

     

    In addition to what @PointC descrbed, you can use .fromTo:

    TweenMax.fromTo(".logo", 3, {autoAlpha:0}, {autoAlpha:1});

    What it does is let you specify the starting values for an animation (in this example, autoAlpha:0) as well as the end result (autoAlpha:1 here). :)

     

     

    :) awesome!!!!

    TweenMax.to + Opacity 0?

    in GSAP

    Posted

    Hi guys,

     

    This is my first attempt on animation using GSAC (basically, I just repeated what the video had)

     

    I have a question about starting an element opacity from 0 visibility to 1 at the start of animation. I know I can do a "TweenMax.from"

    but I wanted to use "TweenMax.to" instead.

     

     

     

     

    Thanks

     

    See the Pen jWeMjO by BUroKHUli (@BUroKHUli) on CodePen

    Getting Started (Main.JS seems to be not working?)

    in GSAP

    Posted

    Hi SoL2Squiz,

     

    Welcome to the forums. Glad you posted here.

     

    if you are going to animate the left property of an object you need to make sure that it has a css position.

    .logo {
  position:relative;
}

    There is a little caption about that in the video but its easy to miss it. We strongly recommend animating x / y instead for performance reasons.

     

    If that css doesn't fix it, please zip your files and post them here. We will take a look.

     

    Happy Tweening!

     

     

    Thank you for replying to my post. I'll take another look at this and see if it works.

    Getting Started (Main.JS seems to be not working?)

    in GSAP

    Posted

    Hi guys,

     

    I used to do basic linear (non-programming) animation in flash and bumped into GreenSock 2 days ago. I am seriously thinking of learning this form of animation but I'm having difficulty starting, mainly because I have no background in programming whatsoever.

     

    Situation:
    I saw the video and tried to duplicate what was said there but I immediately got hit by an error in my MAIN.JS (which I created from scratch using DREAMWEAVER) is this not right? I cannot move on from there and cannot figure out what's wrong with my file.

     

    I attached a screenshot of how I structured my files in one folder and  for your reference my "index.htm" code is down below.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My First GreenSock Animation</title>
</head>


<body>
<div>
<img  class="logo" src="imgs/bubble-crystalclear.png" />
</div>


<!--CDN links for TweenLite, CSSPlugin, and EasePack-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="js/main.js"></script>


</body>
</html>
     
     
    Thank you!

    post-41756-0-35057100-1454637258_thumb.png

    • Like 1
×
×
  • Create New...