Jump to content
Search Community

Search the Community

Showing results for tags 'wrap'.

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.

Find results in...

Find results that contain...


Date Created

  • Start

    End

Last Updated

  • Start

    End

Filter by number of...

Found 2 results

  1. Moonfleet
    Hi. This is my first post here. I got stuck working on an animation with brief like this: Actually I have just problem with the wrapping. If I move box in y axis value of boxHeight and do repeat refresh it overrides modifiers: const sectionHeight = gsap.getProperty('section', 'height'); const boxSize = sectionHeight/elements.length; gsap.set('.box', {y: sectionHeight, x: 200, height: boxSize, width: boxSize}); gsap.to('.box', { repeatDelay: 1, y: '-=' + (boxSize), duration: 1, repeat: -1, ease: "none", repeatRefresh: true, modifiers: { x: gsap.utils.unitize(y => parseFloat(y) + (sectionHeight - boxSize)) } Can I do this with modifiers alone so that I got move theme above section and got stop/delay between each step of 'y: boxSize'. https://codepen.io/olivetum-the-sans/details/zYgNyjX
  2. OSUblake

    ModifiersPlugin helper functions

    OSUblake posted a topic in GSAP

    Just wanted to share some nice functions I came across that can be used with the ModifiersPlugin. Doing a normal modulus calculation restarts the value at 0, which may not be what you want. 500 % 500 // => 0 This function will allow you to do a modulus operation for a min/max range. wrap(500, -100, 500); // => -100 function wrap(value, min, max) { var v = value - min; var r = max - min; return ((r + v % r) % r) + min; } And this is a modified version of that function that will make the modulus value "yoyo". mirroredWrap(600, -100, 500); // => 400 function mirroredWrap(value, min, max) { var v = value - min; var r1 = max - min; var r2 = r1 * 2; v = (r2 + v % r2) % r2; return v > r1 ? (r2 - v) + min : v + min; } With the first wrap function you can do some interesting stuff, like making an object appear in two different places, kind of like in those old asteroid games. http://codepen.io/osublake/pen/XpbmYr/?editors=0010 And with the mirroredWrap, you can do stuff like creating multiple bounces with a single tween. http://codepen.io/osublake/pen/mRJeNX/?editors=0010 .
×
×
  • Create New...