Jump to content
Search Community

Beginner Question: Planning an Animation

jSwtch test
Moderator Tag

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

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

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

@mikel - thanks wrt to //morphSVG





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





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

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