Jump to content
GreenSock

Exhumator

Members
  • Posts

    34
  • Joined

  • Last visited

Posts posted by Exhumator

  1. Hey, i've found very nice javascript code http://www.chiptune.com/starfield/starfield.html and i am trying to recode it to the GSAP. I am not sure how to make it.

    When you open the link, you can move your mouse over the screen, the direction will change. When you scroll down/up you will change speed (forward/backward). Also, you can click the mouse button (and hold it), so you can see star trail. I would like to create this in GSAP but with some controls (speed, direction, trails - on/off).

     

    How to make it? Where to start? Do i need to use pixi (because it looks quite hard for performance)?

  2. I've seen modifiers plugin, why this doesn't work either? I thought modifiers plugin is made for this.

     

    var messages = ["1", "2", "3", "4", "5"];
    
    var tl = new TimelineMax({
    	repeat: -1
    });
    
    function getRandomValueFromArray(a) { return a[Math.floor( Math.random() * a.length )]; }
    
    tl.set("#message", { text: "this works well" });
    tl.set("#message", { 
    	modifiers: {
    		text: function() { return getRandomValueFromArray(messages); }
    	}
    });
    tl.to("#message", 1, { color: "red" });

     

  3. Greetings!

     

    I am trying to randomly change text in DIV in the timeline with "text" attribute (TextPlugins is loaded) but it doesn't work. I think I miss something important but don't know what it is.

     

    The right scenario of this codepen would be:

    1. Randomly set value from "messages" array.
    2. Change color to red.
    3. Repeat it.

     

    Could anybody give me advice how to do it, please? :)

    See the Pen VJQbMZ by MannySVK (@MannySVK) on CodePen

  4. Hello, I am trying to animate every single word in a sentence, lets say we have following div:

     

    <div id="words">I am the best</div>

     

    and now we want to animate every single word ("I", "am", "the" and "best") animate in custom way. Lets say we want:

     

    • "I" to fly in from the left
    • "am" to fly in from the top
    • "the" to fly in from the right
    • "best" to fly in from the bottom

     

    What's the best way of doing it? Do I really need to create every single DIV before the animation?

  5. Hello, I am trying to make object that randomly changes position forever, but now it changes position only once. I have tried to use "modifiers" but it didn't work either - it just ignored duration and animated the object instantly (position was changed in less than 20ms). Any ideas?

    See the Pen eXvXjj?editors=1010 by MannySVK (@MannySVK) on CodePen

  6. Well, I understand what you mean by points 1 and 2. I am trying to make this:

    image.png.c2cd45497872a60d08130da00dc57b75.png

     

    • the grey line represents master line
    • red, blue, green and orange lines are randomly faded elements - their duration is random (longer the line is, the longer duration is)

    Now, I am trying to understand how to code this type of animation properly, so I started with idea of master timeline that has function-generated timeline inside. But I can't imagine how to do that simultaneously (as it is on the picture).

  7. Hello, I am trying to add a dynamically created object via function into the master timeline. What I am trying to achieve is:

    1. create an element with unique ID
    2. make animation with it (it should fade in)
    3. destroy it

     

    I can create it and destroy it, but I am not able to animate it right now. Any ideas why this code doesn't work?

    See the Pen vPgbJv by MannySVK (@MannySVK) on CodePen

  8. Ok, actualy my question is - can i somehow run tween earlier? Something like this:

    tl.to("#object", 1, { autoAlpha: 1 }, "-=1");
    // but can "-=1" be delivered by function as return value? something like this:
    tl.to("#object", 1, { autoAlpha: 1 }, function() { return "-=1"; });

     

  9. Imagine something like this:

     

    tl.to("#object", 1 { autoAlpha: 1 });
    tl.to("#object", 1 { autoAlpha: 0 });
    if (some_condition)
    {
    	tl.to("#object2", 3 { autoAlpha: 1 });
    }
    else
    {
    	tl.to("#object3", 2, { autoAlpha: 1 });
    }

     

    I mean, I would like to make some decision right in the timeline.

  10. Guys, one more question - is there any way how to dynamically set duration for the tween?

    Imagine we have something like:

    tl.to("#element", 5, { autoAlpha: 1 });

     

    And what I am looking for is:

    // getRandomRange(min, max)  is custom function that returns number between min and max value
    tl.to("#element", function() { return getRandomInRange(1, 5); }, { autoAlpha: 1 });

     

    How to do that?

  11. If I may ask once again, @Shaun Gorneau, is there any comfortable way how to control what is being animated in realtime? Let me explain (my english is not very good, so give me a chance :D).

     

    Imagine we have a timeline that contains following segments:

    1. logo animation
    2. woman in a black clothes walking through the street animation
    3. asteroid falling down to the Earth animation

    Now, imagine we have already animated "logo animation" and we are going to the second segment "woman in a black clothes walking through the street animation", but at this moment we don't want to animate that and instead we want to randomly choose what to animate next (2. segment or 3. segment).

     

    So, the timeline can look like this: [1] + [2]

    or this: [1] + [3]

     

    I know, my writing is very confusing, but I am trying to understand how to properly code this kind of logic.

    Also, is there any way how to make "group of tween"? Something like "hey, animate the logo now" and then "hey, animate asteroid falling down to the Earth".

     

    Thanks for your effort and time. I know, this text is hard to read ?

  12. Hello, i would like to create flare light with trail which travels from one point to another. I am able to create simple circle which travels from one point to another, but i have no idea how to create flare effect. Does anybody know how to achieve that effect?

     

    Maybe i should write it in other words - my goal is to make comet (or meteor) with trail (that disappears as it flies).

×