Jump to content
Search Community

ElliotGeno

Business

  • Posts

    63

  • Joined

  • Last visited

 Content Type 

Posts posted by ElliotGeno

    Draggable for Canvas elements

    in GSAP

    Posted

    So I started creating my own tumbler effect using canvas. I have the rendering down perfect, but I needed to add the interactivity.

     

    Essentially I draw an SVG of numbers into a canvas element to use as a sprite sheet. I then blit the numerals onto the display depending on where I need them. Works very fast!

     

    I then started writing my own events for touch dragging and throwing but kind of got stuck coming up with snapping to a specific target point. I then remembered Greensock had a plugin for such a thing!

     

    But the problem is that it is based on physical elements... not applying the effect to a generic object.

     

    I wonder if there is someway to hack Draggable to make use of it for things other than elements. Basically just use it to tween a value instead?

     

    The only way I can think of is by creating some transparent div to throw. Or perhaps there is a better way to just find out how to calculate and adjust the target based on the velocity of the object.

    See the Pen YGXPgK?editors=0100 by pyrografix (@pyrografix) on CodePen

    Easing Feature Request

    in GSAP

    Posted

    @OSUblake Is cubic the most performant?

     

    If so, I think I could design something that automates the cubic bezier handles. (Basically balance the control points based on other neighboring points.) Optionally allow handles to be overridden by users. (each anchor would toggle between auto-bezier, manual-bezier, and point/'zero-radius')

     

    What do you think of that?

    Easing Feature Request

    in GSAP

    Posted

    Other than chaining multiple tweens, it is rather difficult to adjust a property that needs to return to the same value. I've run into this a lot, but have a hard time articulating the need. Recently, I was reading a blog about various animation tools and Mo.js came up which I wasn't familiar with. (Don't worry Jack... I'm not switching!)

    What was interesting is they visualized my need in a graph: http://mojs.io/tutorials/easing/path-easing/

    Rather than easing from 0>1 it eases through various values back to 0. (0>0)

     

    Like this:

    easing.png

     

    I realize you can create your own easing function, and the new modProperties feature can help with this... And it is probably a serious undertaking as there are probably some internal checks that you need to do if a custom ease is applied to allow the property to tween. But this would be extremely useful!

     

    Perhaps there are some unique tricks you can pull out of your hat? ;)

     

     

    Feature Request: Wrap values (modulo)

    in GSAP

    Posted

    I really like this!

     

    The first thing that popped into my head was elliptical motion:

    See the Pen GqOZQz?editors=0010 by pyrografix (@pyrografix) on CodePen

     

    @Jack @Carl I tried the scale property but it didn't work properly though. Any suggestions as to why?

    See the Pen QEOPwK?editors=0011 by pyrografix (@pyrografix) on CodePen

     

     

    I am thinking it is because scale is a composite of scaleX and scaleY. (scaleX and scaleY work independently)

    • Like 1

    How to offset MorphSVG and BezierPlugin on SVG content

    in GSAP

    Posted

    Thanks guys! I also found this worked where 10 is half the width and height for both transform origin and offsets but I like your solution better!

    var path = MorphSVGPlugin.pathDataToBezier(".path",{offsetX:-10,offsetY:-10});
var bee = document.querySelector(".bee");
TweenMax.to(bee, 20, {
	force3D:true,
	bezier: {
		type: "cubic",
		values: path,
		autoRotate:true
	},
	ease:Linear.easeNone,
	repeat:-1,
	transformOrigin:"10 10"
});
    • Like 1

    Clone reference to tween?

    in GSAP

    Posted

    I was curious if there was a way to clone a reference to a tween. Similar to how TimelineMax.add( TweenMax.to("blah",.5,{x:50}) ); can include any sort of tween method in it as an argument and call it at a later date.

     

    For example:

     

    I want to create a generic method that could clone any reference any type of tween or timeline... kill or somehow pause that tween from the argument... then call a new tween or cloned tween at a later date.

     

    Like this:

    addEvent(element,"mouseover", TweenMax.to(element,.5,{backgroundColor:"red"});
addEvent(element,"mouseout", TweenMax.to(element,.5,{backgroundColor:"grey"});

function addEvent(object, event, tweenObject){
// clone and kill or delay event
     object.addEventListener(event,function(e){

          // trigger new cloned tween on event

     });
}

    This is simplified from what I am trying to do... Hopefully I am being clear enough! Assume that we don't know the Tween type or Timeline method we are calling. I'd hate to have a ton of conditional logic that detects what type of tween or which method to call.

    See the Pen EjBvyE?editors=001 by pyrografix (@pyrografix) on CodePen

    IAB Recommends 200kb file size for standard display ads

    in Banner Animation

    Posted

    Like ripping a Band-Aid off... while you are still bleeding.

     

    The tools simply are not there yet for designers to create HTML5 banners. The code these tools spit out are a rats nest of code I would not want to debug. You are better off hand coding these banners. Unlike Flash, it's an exercise better suited for those with development skills. Banner ads are typically handled by designers, so a shift in the types of associates applied to the work will need to change. Luckily Greensock is there for us designers/developers hybrid types! 

     

    These new specs are still woefully inept. This was an opportunity for the IAB to fix problems with the old standards. For example the 160x600 has almost 150% of the surface area... which is a direct translation to file size. They could have used this opportunity to optimize specs per creative layout. 

     

    Also, why are there still specs for frame rate for HTML5? I understand it for video... but HTML5 doesn't have a frame rate you can control like Flash. Also, libraries like Greensock are essential to building these things. We not only NEED them and they SHOULD be externalized so they are cached on the user's machine. And the SHOULD NOT count against your file size. Why make the users load 30% of the banner every single ad that displays? That is just ignorance.

    Hex to HSL color conversion

    in GSAP

    Posted

    Sorry, I guess I should have been more clear... I don't really need to tween the HSL color per say.  I actually am get the RGB color switching to HSL bumping up or down the brightness then tweening to that color I ended up rolling my own version of Hex to RGB to HSL and then adjust the lightness then tween to that color.

     

    Here is what I ended up with:

    var rgb=getRGB(element.getAttribute("fill"));
var hsl=getHSL(rgb);
var targetLightness=Math.max(Math.min(hsl.lightness+(i%2==0?amount:-amount),100),0);


function getRGB(hex) {
hex = typeof hex == 'string' || hex instanceof String ? parseInt(hex.replace(/^#/, ''), 16) : hex;
return {red:(hex >> 16) & 0xFF, green:(hex >> 8) & 0xFF, blue:hex & 0xFF};
}
function getHSL(rgb) {
    var r = rgb.red;
    var g = rgb.green;
    var b = rgb.blue;
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, , min = Math.min(r, g, ;
    var h, s, l = (max + min) / 2;


    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g -  / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
   return {hue:h * 360, saturation:s * 100, lightness:l * 100};
};

    Alternating property direction with any array

    in GSAP

    Posted

    Ok guys... I have a newer update. THIS one is about three times more bad ass...

    TweenMax Alternate Pattern

     

    This works much the same way as before except now the property gets an array of positions.

     

     

    So if you just wanted to alternate between red and green it would look like this:

    TweenMax.staggerTo(".bob",.5,{alternate:{backgroundColor:["red","green"]}},.1);

    You can also add any number of alternate values to this list. SO you could do something like this and have 6 color variations...

    TweenMax.staggerTo(".bob",.5,{alternate:{backgroundColor:["red","yellow","green","cyan","blue","violet"]}},.1);

    If there are more items than there are in the alternate array, it loops back to the beginning of the array. So if you had 5 items, and three colors it would look like this: red, green, blue, red, green

     

     

    OH... and I almost forgot to tell you... it plays well with variables duplicated outside of the alternate array.

     

    So for example:

    TweenMax.staggerTo(".bob",.5,{alternate:{backgroundColor:["red","green","blue"]}},.1);

    is the same as:

    TweenMax.staggerTo(".bob",.5,{backgroundColor:"red", alternate:{backgroundColor:["green","blue"]}},.1);

    It basically just adds "red" to the alternate array.

     

     

    What is neat about this, is that you can basically get a rudimentary particle effect or at the very least more organic looking animation.

    Alternating property direction with any array

    in GSAP

    Posted

    I went ahead and modified TweenMax.staggerTo to allow for this for you guys to play around with:

     

    Modified StaggerTo

    Modified Source

     

    The new call is very simple:

    TweenMax.staggerTo(".bob",.5,{x:"+=200",opacity:0,alternate:{x:"-=200"}},.1);

    It's a very small line of code that I added to staggerTo():

    copy[p]=vars.alternate?copy[p]=vars.alternate[p]?i%2==0?copy[p]:vars.alternate[p]:copy[p]:copy[p];

    One outstanding thing, I would love to add this to TweenMax.to() as well but couldn't figure that one out. Also wasn't sure if there was a better way at ignoring custom properties.

    • Like 1

    Alternating property direction with any array

    in GSAP

    Posted

    There are often times where I'd like to alternate each line of text flying in. Or different objects flying in from different sides.

     

    Most of the time I have to get a list of the objects that I want to tween and then alternate the properties each time. Is there anything like that built into TweenMax?

     

    If not, it might be a pretty easy thing to add... I do these animations a lot. I wonder if others do to?

    See the Pen rVbYrp?editors=001 by pyrografix (@pyrografix) on CodePen

    • Like 1

    Hex to HSL color conversion

    in GSAP

    Posted

    I have an SVG that has a ton of paths in it with various colors.

     

    I'd like to loop through all the paths and apply a brightness adjustment on the fill color.

     

    If I could convert the Hex to HSL, then I could tween the brightness separately. Obviously I can write a function to handle this, but it poses the question, is there something already available via TweenMax to do this?

     

    Side note, it would be really cool if there was something like this for colors:

    TweenMax.to(myObject,.5,{lightness:50});

     

    Behind the scenes, Greensock would break the current color into HSL. Tween the lightness. then recombine it back.

1
2
3
Page 1 of 3  
×
×
  • Create New...