Jump to content
Search Community

Using Cycle with the Bezier plugin

Dipscom test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

So, today I had some spare time and an idea - Feeding a bezier curve into the cycle property. It worked with the default values for the bezier curve. But it does not like it too much if you try the non-default values.

 

I kind of get why. The cycle is expecting an array and the non-default version of the bezier is an object.

 

However, I was wondering if there's a way to trick the system. Or if there's a global way of setting the options of the bezier plugin.

 

I am not at a level to start reading the actual source code to understand what the plugin itself is doing...

 

With that in mind I hereby

 

INVOKE THE LIGHT AND BEG THE MIGHTY CODE-GOD TO ENLIGHTEN THIS MEEK, INSIGNIFICANT FANBOY AND TELL ME WHY! OH GOSH WHYYYYY? WHY?!

 

Or, maybe, just let me know if my musings from the third paragraph have any merit.

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

  • Like 1
Link to comment
Share on other sites

Actually, cycle can be an array of values to cycle through, or it can be a function that spits back values. You can leverage that in this case (assuming I understood your question properly):

//OLD:
bezier:getBezierArray(randomFloat(3,6))

//NEW: 
bezier:function() { return getBezierPoints(randomFloat(3,6)); }

That should give you the flexibility to return whatever type you want. I may be misunderstanding your goal, though. 

  • Like 2
Link to comment
Share on other sites

*BOW*

 

*BOW*

 

 

I knew I should have had a snippet of code as well.

 

What I attempted was this (oh mighty lord):

cycle: { 
 bezier:{
   curviness:1.25, 
   autoRotate:true,
   values:getBezierPoints(randomFloat(3,6))
 }
}

The above throws an error (forgive me):

Uncaught TypeError: Cannot read property 'values' of undefined

Which is quite understandable. Because cycle expects, afaik, an array or something else.

 

My goal was to enable the 'autoRotate' in the Bezier plugin. That was why I was wondering if there is such thing as a global switch in it.

 

 

*BOW*

 

*BOW*

 

*SCRAPE*

 

*WIMPER*

  • Like 3
Link to comment
Share on other sites

  • Solution

Totally understandable. Yeah, it's just hard for the engine to discern your intent because if cycle gets an array, it assumes you're wanting to cycle through those values whereas bezier can actually accept an array of values itself. Does the function solution work okay for you? You should be able to use an array of objects if you prefer, kinda like:

bezier:[{values:[...], autoRotate:true}, {values:[...], autoRotate:true}]
  • Like 1
Link to comment
Share on other sites

@OSUblake - Thank you.

 

And, I wanted to get add that it is possible to have have a function return the value for the bezier as I initially intentioned. The issue was that I was not returning the correct object. I have finished tinkering with this, this is as refined as it is going to be.

 

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

 

Happy to have set out to achieve a particular technique and managed to work it out - with help where needed.

 

:D

 

Also, the bonus feature on this updated version is that pretty much everything is randomly generated. It should always be different and yet, you shouldn't notice (given the number of circles involved) unless you look out for it.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...