Leaderboard

You can't animate option tags, plus styling them consistently is almost impossible. You can instead use something like jQuery UI which replaces your select tag with custom HTML that you can style or animate as you like. There are many other libraries/frameworks that do same thing but be sure to check if they are accessible.

Accidental discoveries are always the best. They make you feel like you just discovered penicillin. I understand why works after seeing it, but if somebody asked me to do that yesterday, I'm sure I would have done it the hard way. With a lot of circles and a lot of math.

The animation will play right away the way you set it up, and the element might not be ready. import { Component, ElementRef, ViewChild, OnInit } from '@angular/core'; import { TweenMax, TimelineMax, Power2 } from 'gsap'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { @ViewChild('test') testRef: ElementRef; tween_test; ngOnInit() { this.tween_test = TweenMax.to(this.testRef.nativeElement, 0.3, { opacity: 0, paused: true }); } openContact() { const tl = new TimelineMax(); tl.add(this.tween_test.play()); } } https://stackblitz.com/edit/angular-tkmxb4

Your guess would be correct as to the problem. When you interrupt an animation, the value does not back to its original state, which can problematic with from tweens. You could do a fromTo tween, going from y=100 to y=0, which would fix the position problem. Not sure how you wanted to handle hovering in -> out -> in really quickly, but I set it up so only the position resets.

Using a png is better for performance, but you need to wait until the image loads before you can start using it. So using window.onload is kind of pointless unless your images are in the DOM, which is how I load them sometimes. <aside style="display:none"> <img id="img" src="some-image.png" /> </aside> And you don't use beginPath() and fill() with drawImage(). Just draw the image. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage ... var img = document.querySelector("#img"); window.addEventListener("load", onAssetsLoaded); function onAssetsLoaded() { // initialize stuff } function draw() { ... context.drawImage(img, 0, 0); } Coding Math is an excellent resource. Keith Peters is the original author of the book that Sahil linked to. Here's a video on edge handling. @Sahil Processing.js is more like a binding to the processing language. P5.js is a little different in that it doesn't use the processing language, and is written in JavaScript. But processing is really cool. My 2 favorite books are the one that you linked to, and "The Nature of Code". It uses the processing language, but it looks a lot like JavaScript, so it's not too hard to understand. I bought the actual book, but you can view it for free. http://natureofcode.com/book/ The genetic algorithms are really cool. There's a section in there about making smart rockets that evolve, and get smarter over time. Here's a video of it using p5.js.

I suggest you take this to a Worpress forum. If i'm understanding your request this is a question about passing values from Wordpress to javascript. However, a variation of what you are doing might work, but you'll want to output the script once in the footer not on every ACF repeater field, and with ACF output the desired values as a data attribute on single-number elements such as: <div class="single-number" data = "<?php the_sub_field('ending_number');?>"><?php the_sub_field('starting_number');?></div> not sure about syntax (escaping quotes and such) above but it's approximately what you need to output <div class="single-number" data= "end-value ">100</div> then retrieve end values in your each loop for the counter.

Haha - I'm busted. A few months ago I was designing something and meant to type 10 in the dash length, but missed the 1 and found the circles by accident. I've been meaning to make some demos and type this up for the GS community ever since then, but kept pushing it to the back burner until now. Thanks for the canvas conversion. I think that will help some people.

Pretty neat! Was this an accidental discovery? For canvas that would be... context.lineWidth = size; context.setLineDash([0, size]);

I just came across a video, coincidentally it turned out to be about processing js. Few years ago I had bookmarked processing js page but never really went through it. So just out of curiosity I visited processing js page and realized now that has become p5js. https://p5js.org/examples/hello-p5-flocking.html Anyway, I was going through their examples page and came across this flocking demo that wraps particles around the canvas. I removed all the flocking code, here is basic wrapping demo. But wrapping isn't big deal, following snippet from demo is for wrapping. Boid.prototype.borders = function() { if (this.position.x < -this.r) this.position.x = width + this.r; if (this.position.y < -this.r) this.position.y = height + this.r; if (this.position.x > width + this.r) this.position.x = -this.r; if (this.position.y > height + this.r) this.position.y = -this.r; } There might be more unnecessary code that you can clean up step by step.

@OSUblake Thank you, it works perfectly! One little detail to close the topic: const tl = new TimelineMax({paused: true}); tl.add(this.tween_test); tl.play(); // launches perfectly

Ya, I thought they dropped whole processing.js idea and started focusing on JavaScript library only. As the processingjs.org hasn't changed over the years and all examples are old as well. Thanks for the book. I was watching the coding train video.

I've never messed with <option> elements, but it doesn't look like you can change the position or transform it. If you animate something else like the backgroundColor, you'll see it work.

mmm... scallops. Very nice, Craig. Had no idea about this.

Hey everyone Another quick SVG tip. Set your stroke dash length to 0 and your linecap to round. That will get you a nice circle border around your path or a string of circles along an open path. For a complete string of circle shapes along the stroke, set the gap equal to the stroke-width. https://codepen.io/PointC/pen/VXMmZV If you set the gap to less than the stroke-width, you can overlap the circles and create a nice scalloped edge. I personally like around 50-70% of the stroke-width. Throw a gradient on for a nice picture frame. https://codepen.io/PointC/pen/bvvddx With some creative layering and masking you can confine the scalloped edge to the inside or outside of you path. https://codepen.io/PointC/pen/YaaqPQ Using two strokes with different stroke-width and gap sizes, you can turn an ordinary ellipse into a cloud. https://codepen.io/PointC/pen/RMMMKv Morphing shapes with a circle border creates some cool results. https://codepen.io/PointC/pen/rddOqd Since these are circles making up the stroke and not actual elements, we can’t draw them on or make them move individually. Or can we…? Using a mask, we can draw them on and animating the gap size can bring them into position in an interesting manner. https://codepen.io/PointC/pen/wmmmmK It has its limits but can produce some fun results. The main thing to remember is set your dash length to 0 and the linecap to round. After that, experiment with stroke-width and gap size. Happy tweening.

It's hard to tell what's going on from a snippet. Can you make a simple demo on stackblitz? https://stackblitz.com/

@Sahil Thank you for spotting that one, sometimes I forget to check the browser console when I work on code pen, schoolboy error.I will spend some time today to debug that one. I'll let you know how it goes. thanks

No, but there's a couple examples of how you could do that in this thread.

I love the last demo, really cool and great post as always.

Something is wrong with your previewCase function, it throws errors as follow, uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string. react-dom.development.js:619:7 uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.

Nice post, .. but you lost me at scalloped: yuck

It is good idea to post partial demo even if it isn't working so we have something to work with. I don't know why are you using pngs for your particles, from the gif you posted, it doesn't seem necessary. Anyway, I don't have ready demo to post. Following is a tutorial about bouncing particles I came across recently, you can go through it. https://codepen.io/Godje/post/bouncing-particles-tutorial To wrap particles around canvas you just need to change bouncing calculation to wrapping. You can do that as follows, if(particle.left - particle.width/2 > canvasWidth){ particle.left = 0 - particle.width/2; } Note: The above snippet I have written is just to explain, I haven't gone through demos from tutorial I posted, but this should give you idea. You can also search codepen for demos or google for simpler tutorials. If you want to learn about physics based animations then you can get this book http://lamberta.github.io/html5-animation/

I don't know how you have set up things, that's a lot of code to go through. Maybe you are setting some flag that determines if panels are open or closed. (Never used react either) Following is simple demo, how I would do it. Keep track if panels are hidden or not and animate them to the hidden or visible state. Right now in your example, I am guessing that when you click on any panel you are changing the state so when you click your menu button it just resets their position instead of hiding them. Hope this gives you idea.

Sorry - that's my fault. I dropped those yoyos on the tweens and restarted from the 'back' label. I think you wanted to replay from the start label. How's this?

Hi @ajando Welcome to the forum and thanks for being a member of Club GreenSock. I'm not sure I completely understand the desired outcome. Should the rings draw and then the wavy/bulge part repeats? Like this? Or did you mean the waves would yoyo once and then the whole timeline repeats? I wasn't quite sure. Hopefully that helps. Happy tweening and welcome aboard.

Ya you can use GSAP to do whatever animation you like that you would normally do with any elements once you add text. Following is a simple example with SplitText but you can do all kind of different effects.