Pr3fix

Say we have this code: var particles = [ {x: 100, y: 100, endX: 10000}, {x: 200, y: 200, endX: 20000}, {x: 300, y: 300, endX: 30000} ]; and we want to Tween the 'x' value of all the objects in the array, using the 'endX' as the destination value. How do you access the destination value from within the TweenMax.to() statement? TweenMax.to(particles, 3, {x: this.endX}); does not seem to work, and I can't find any configuration of settings that does. the "x" value for each object should be tweened to the "endX" value on each object.

Part of the issue is the SVG is not scaling from absolute center. Basically, the page fades in wit the circle in the center. Then it animates to the middle-left (grid system). There's a count-down, and when the countdown reaches 0, the circle expands. I'm using SVG because I wasn't sure how to integrate canvas into this (not only does the circle expand but also relocates around the screen before doing so), and I'm also just not very familiar with the canvas API. I'd be happy to swap it out for canvas though if I could figure out how without breaking everything currently on the page.

Interesting concept, but I'm not sure if it'd work for my needs (SVG). I could be misinterpreting it though.

Hello, I have a fairly complex app using lots of code so it's difficult for me to extract just the problematic bit, but I've given it a go. I have an SVG (white circle), which I am trying to overlay text content onto. The circle is animated to/from a couple of locations on the page. After a specific event occurs on my page, the circle is to "expand" to fill up the ENTIRE viewport of the user. The circle is to be visible on the background, so that the foreground content (text, etc.) does not get obscurred. It's just supposed to be a visual element indicating something has completed. I should note, that the animation lives on a page using a responsive CSS grid ( Toast ) as the page needs to be adaptable to browser site and displays content differently depending on screen size. I am running into a couple of issues: 1. the circle, while appearing to expand in the codepen, does not cover the entire screen on large resolutions. If you have a big enough monitor, you can see the "edge" of the circle. It's just really big, but still only scaled. I need to make sure it covers the entire viewport regardless of size. 2. On certain browsers (namely all IE), the expand causes overflow scrollbars to appear, "stretching" the page to fit the SVG. This should not happen. I was having this issue with all browsers for awhile, but found a hacky workaround which seems to work for Chrome/Firefox/Safari, but not IE. 3. all other page content should be left unchanged by the circle expanding. It should maintain location/visiblity throughout. Any tips much appreciated TL;DR: "how do I make an SVG element expand to fill the user viewport without stretching the page or covering other content?"