JamesGrubb

Thank you fro this solution. I was hopping to stick with the svg.js. code where I'm attempting to animate the gradient stop position

Hello attempting and failing to animate an svg gradient. Im using svg.js and setting the gradient object using a gradientStops object var gradientStops = { _start: 0, get start() { return this._start; }, set start(value) { this._start = value; }, _end: 1, get end() { return this._end; }, set end(value) { this._end = value; } }; var draw = new SVG().addTo("#svg").attr({ viewBox: "0 0 100 100", class: "w-2/3 bg-red-50" }); var gradient = draw.gradient("linear", function (add) { add.stop(gradientStops.start, "hsla(352, 99%, 90%, 1.00)"); add.stop(gradientStops.end, "hsla(352, 99%, 50%, 1.00)"); }); var globe = draw.circle(50).fill(gradient).cx(50).cy(50); gsap.to(gradientStops, { start: 1, end: 0, duration: 2, yoyo: true, repeat: -1 }); Thanks in advance

Very good?

Oooh. Thank you. I need to get my head around that javascript. I've only ever seen push used when pushing in to an empty array?

Ok thanks. Ill try that approach.

Hi Zach thanks for your help. By 'item' i mean DOM elements created dynamically from the data in the 'data' array. The data.length === 4. There are 4 items and I'm hopping to smoothly transition from 'opacity:0' to 'opacity:1' , pause, then transition to 'opacity:0'. Cycle through each item in the array. I hope that makes sense?

Hello. Im using an onUpdate function to iterate over a an array to create a series of DOM elements. I would like to animate their opacity in and out, but not quite sure how to add animate to each item? Hope that makes sense. I have had a stab with a forEach loop. But pretty sure this is not the right way to go about things. Also the first time the animation runs the element is empty and each loop the animation for iteration is too fast ? Im using Alpine.js

Thanks for your feedback. This particular issue concerns svg.js not paper.js. My question was that I have fixed the issue with paper.js and now I was having difficulty with svg.js. @OSUblake came to the rescue on the paper.js issue, but I don't like to ask specific members? I hope you can still help.

Hi Im trying to replicate the behaviour from this post. Not sure what im doing differently that is breaking the code? Thanks in advance

Thank you so much. really appreciated

Fixed. codepen

Hi Thanks for the reply. I found a link to another users Paper.js on your forums and @OSUblake seems to have some experience with the framework.

Hello trying to animate the length of a paper.js path from 0 to 100% in my codepen I have entered an arbritary '20' Thanks in advance

Brilliant, thank you! Didn't know about the Snap plugin. ?

Hi is there a way of returning an animated value from the onUpdate function? I wanted to use the value in a paper.js script . Im using Alpine.js something like: var object = {value : 0} function result(){gsap.to(object,{value:20,duration:5,onUpdate(){ return object.value.toFixed(0) }})} var animated number = result(object) // <-- counts to 20 over 5 seconds?

Fixed it . needed toFixed(0) when calling the array

Hello I have an a pen where on an 'onUpdate' function I would like to add the next paragraph from an array of paragraphs. I think the setup is close but not quite sure how to increment the index? Thanks in advance

Yea , makes sense thank you.

Thanks, Im using svg.js its allows you to write path data as an array as in my pen. I wondered if it was possible between the array values

Hello just wondering if its possible to tween the values of two arrays?

Unfortunately rearranging the links had not effect. Its to do with my little knowledge of ES6 imports. I lack the knowledge in this department. Any other ideas?

Ok will try thanks

Hello having an issue where a local build is working but the Netlify built site is showing a resource not found error. Wondered if someone could check my code please. //scripts.js gsap.registerPlugin(ScrollTrigger) const tl = gsap.timeline() const q = gsap.timeline({ defaults: { duration: 2 } }) const items = document.querySelectorAll('.item') tl.from('header', { y: "-100%", scrollTrigger: { trigger: 'header', // markers: true, start: "300px, 10%", end: "200px, -200px", scrub: 1 } } ) my index.html links to scripts in the following order //The {% version %} is a nunjucks shortcode to create a random number to force a cache refresh <script src="/js/scrollTrigger.js?v={% version %}" defer></script> <script src="/js/gsap.js?v={% version %}" defer></script> <script src="/js/scripts.js?v={% version %}" defer></script> <script src="/js/alpine.js?v={% version %}" defer></script> Thanks in advance

Thanks again.

I believe drawSVG is club greensock only?