omarel

@Amplus yeah unfortunately as mentioned above even CSS styling is not possible on an embedded SVG object. I know you're feeling because svgs can get so big and ugly they're hard to handle alone let alone inside another document. But the styling has to be with the SVG content itself not the object. You can do things like embed the SVG html itself with different techniques which can make it easier....For example in server side PHP you can do an include which brings the SVG content with one line and then you can work with the SVG in a separate file. As mentioned above perhaps there are similar scenarios in JavaScript by keeping the files separately and somehow getting the actual SVG content into the DOM but I'm not sure what drawbacks that can include as well.

@Magnu5 I believe this issue is related to the way the SVG dom itself works. If an SVG has a width of 50px and the viewbox is set to 100px it will create the necessary empty space to fill in the viewbox. So technically the SVG is acting like it should by providing that additional padding. Once those properties are removed or adjusted within the svg it should be edge to edge again.

Wow. Yes. Perfect!! Thank you. That will come in handy.

I think the issue is your viewbox in the SVG. I changed the SVG like so and it goes edge to edge <svg id="test-svg" width="50" viewBox="0 0 50 50"> <rect height="50" width="50" fill="red"/> </svg>

hmm, a search led me to a form answer explaining that initial delay goes away after it runs once so it won't come back. I'm wondering how to solve this. I guess I can add a delay to the first item in the timeline and the delay will happen all the time, but what if i want 0 delay when it first runs, and only that recurring delay on all repeated timelines... src:

I have a timeline that runs. When you click a replay link the timeline reverses and then replays. I wanted to add a slight delay only right after the timeline gets reversed and the timeline replays. It works great when you click replay the first time, you can see the delay, but when you click replay one more time, the delay disappears and the replay happens instantly. How can I stop this delay from disappearing? (Please click replay twice to see the difference) The delay is on the last line in my js file. function restartAnim() { tl.restart().timeScale(speedOfAnim).delay(1); }

Wait sorry I found this... Looking through this now: https://codepen.io/GreenSock/full/OPqpRJ/ and the cdn's listed here at the top: https://greensock.com/docs

Just wondering like is there anyway to play with premium greensock on any online playgrounds like codepen? Do I have to just host my own file and attach it to codepen? Trying to find a way to easily test and play with the premium greensock online.

I deleted node/npm and reinstalled and also just updated my mac with all the software updates and my Safari seems to be restored. It does work in Safari. Thank you! i love greensock!! thank you for the forums being so active. So appreciated.

Hmm, yes something is going on in the Safari console. I'll have to figure out whats up with my Safari. I think its related to an NPM installation. Sorry guys. gsap is great!

Update: I'm starting to wonder if it's just my Safari on my computer. I have to do some digging.

Is it not compatible with previous versions of Safari? If not, is there a way to do a falback? This could be bad if the page simply doesnt load or the animation doesnt work on someone who simply hasnt updated to the latest browser version. Most common users don't bother having the latest browser.

Hmm, my Safari is on Version 10.0.2

I have a pen I worked on with drawSVG and I love this plugin!, but I just noticed the pen simply wont work in Safari. Any ideas?

LOL I was just coming to post about a similar solution. I thought it was kind of hacky but I guess that's the right way. Was going to do: CSS svg { visibility:hidden; } and then jquery after the timeline JS/jQuery var tl = new TimelineMax(); $('svg').css('visibility','visible'); BUT I prefer to use the tweenlite.set method. Thank you!!

I was able to get the code on codepen. You can see on load the entire SVG flashes and then starts the animation:

I'm using drawSVG plugin on an SVG to animate strokes on letters. Everything is working as expected, EXCEPT, when the page loads, the full SVG shows, then disappears and then animates. How do I get the svg not to show at first? I've tried adding visibility: hidden; to the paths but then the animation doesn't start.

I created a simple timeline following a tutorial, but the animation doesn't run and I keep seeing this in the console: Uncaught ReferenceError: TimeLineLite is not defined Here's my pen: http://codepen.io/omarel/pen/mPEmpe