Jump to content
GreenSock

jSwtch

Beginner Question: Planning an Animation

Recommended Posts

Hello, I am wondering what is the best way to create the following animation:

 

I want to create an animated hero size image that animates.  Basically a large box filled with triangles that are changing color with two functions. One - a slow function affecting every triangle in the box randomly, and two - changing color with a greater frequency within some range of the mouse cursor as it moves across the image.

 

I can think of a few ways to possibly get started but I am not sure the best way to go about it, and why.

 

1. Create the divs in html, using css grid and then use box sizing with large border size to create many triangle shape appearance. and use event handlers to add classes to the borders for color change on hover.

 

2. Use java script to manipulate the DOM with iterations - fill a set space (no css grid). Then still add classes to the border for the color change.

 

3. Create an svg in a vector drawing program. Animate.

 

Either way I plan on using media queries to create three distinct looks at different screen sizes.

 

I appreciate any thoughts or feedback.

 

Link to comment
Share on other sites

OK I got this going on, which isn't too bad.

See the Pen MrqYgo?editors=0110 by jswtch (@jswtch) on CodePen

 

 

 

How do I assign random colors to the state? I don't want to have each tile cycle through all colors

Link to comment
Share on other sites

Glad you got it working. Yeah, SVG sounds like a good fit for this.

Not really sure what you need for the colors, but if you want a random color on each mouseover you could randomly pull from an Array like:

 

See the Pen eyLzbR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Thanks for the response. Aside from some polish I think I have it figured out.

 

I was wondering if anyone can comment on how resource intensive this is for a website? Or if there was a better way to accomplish something similar?

 

I dont know why I keep getting "invalid morphSVG tween value: [object Object]"

 

Also, some polygons get stuck "turned on", any thoughts on how to avoid this?

 

 

See the Pen MrqYgo?editors=0010 by jswtch (@jswtch) on CodePen

 

Link to comment
Share on other sites

Hi @jSwtch,

 

The lines 14, 24 and 32 are not necessary - a little mistake ("invalid morphSVG tween value: [object Object]").

The function 'start' unintentionally (?) flashes some objects.

 

See the Pen 645ad590f906adb1d230160ca56ad728 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

 

  • Like 4
Link to comment
Share on other sites

@mikel - thanks wrt to //morphSVG

 

 

Quote

 

function start() {
  var $startCount = Math.ceil(Math.random() * 15);
  for (i = 0; i < $startCount; i++) {
    //setTimeout(pulse(), 300);

   pulse()
  }
}

start();

 

 

The purpose of this function here was to provide an initial seed for random lights, that is independent of the mouse cursor. However when I trigger it I get all instances pulsing at once. What I want is to trigger them at some time offset - so it appears like they are triggering individually. I tried using setTimeout but that didn't work.

 

See the Pen MrqYgo by jswtch (@jswtch) on CodePen

 

Link to comment
Share on other sites

OK I think there is probably some simple solution to this but I am kinda stuck here. 

The start function is causing five polygons to change color. Great

All I want to do is stagger those animations so they dont pulse in sync. 

 

I tried some setTimeout(), setInterval() methods in the start loop but I couldn't get it.

 

See the Pen qpJRxX?editors=0010 by jswtch (@jswtch) on CodePen

 

Link to comment
Share on other sites

Hi @jSwtch,

 

Please take a look at this code:

 

 

See the Pen 21fed74a33b8583074f4f41543c361ee by mikeK (@mikeK) on CodePen

 

Also try a separate 'pulse' function for the startup animation.
And - as an alternative: bind a hover function for the start animation to a container or maybe to window (?).

 

Happy looping ...

Mikel

 

 

  • Like 3
Link to comment
Share on other sites

Got it thanks for that demo. I marked this thread as [solved]

  • Like 1
Link to comment
Share on other sites

Hi @jSwtch,

 

Sorry, the last pen is broken. The start function reacts again with a second mouseenter.
It was not obvious in fast running numbers.

 

So here's the simple version: only the function is visible and usable, which is usefully needed next:

 

See the Pen 21fed74a33b8583074f4f41543c361ee by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

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.
×