Dipscom
Community Answers
-
Dipscom's post in Problem with Transition (Zoom) effect to SVG path element was marked as the answer
Hi Creedplay,
Welcome to the forums!
Thanks for providing a reduced case example it really helps.
For some reason, this particular pen is taking a bit of time to respond for me, it could be your SVG that is a bit complex or it could just be CodePen having a bad hair day.
Firstly, in case you are not aware, you don't need to place all the HTML code in your Pen, only the stuff that goes in the <body> tag, CodePen adds the rest. And you can add jQuery and GSAP via the Settings > JavaScript > Quick-add option.
I made a fork of your pen and tidied up a bit. I think it is kind of working as you are looking for now. It's a very crude way at the moment but it should get you there.
I would have a couple of questions in regards to your setup. Is there a particular reason you were using the attribute plugin to tween the tag attributes of translate and scale? GSAP can handle all of that for you since you are scaling the whole SVG not nested elements. You probably only need the attr plugin when dealing with nested SVGs.
Funnily enough I am working on exactly the same thing today, click on an area of an SVG and zoom there. The technique I am going to use is similar to what I have put together for you.
The idea is to scale from the center of the SVG, by setting transformOrigin to "50% 50%" up by X at the same time tweening the x and y to a pre-determined value (exactly what you were doing, really).
I've remove the translate attribute from the <g id="layer1"> tag as it was causing the map to jump around when tweening the values. See if you can edit your map so that it does not contain that and you should be good to go.
Here's the fork:
See the Pen kXKNjo?editors=1010 by dipscom (@dipscom) on CodePen
Happy Tweening!
-
Dipscom's post in TimelineLite Not working in Chrome, Need for help ! was marked as the answer
Hi jimyu0414,
Welcome to the forums!
You said it yourself: "the code is actually working" - So, TimelineLite is working in Chrome. What seems to be wrong is your setup.
Elements inside of the <defs> tag are not part of the DOM tree, they don't get rendered into view so, animating them is not advisable. There are ways, of course, but I don't think it is applicable for what you are trying to achieve.
I have forked your pen and made a couple of changes, I hope this is what you were looking for.
See the Pen dXdZNq?editors=1010 by dipscom (@dipscom) on CodePen
If you want to animate something inside of a mask, make sure the mask is on its own element - in this case the <g> I created as a wrapper for your <use> element. Then, animate whatever it is that you need inside that <g>.
Hope this helps.
-
Dipscom's post in .add() not firing in sequence was marked as the answer
Hi BradLee,
Thank you for providing a simple Pen. It really helps us to help you.
In your code you are using apostrophes ` rather than quotation marks ' (single) or " (double). That will be an issue at some point.
But the real reason you think that .add() is not firing correctly is because in your second timeline, you have a .set() method call and that happens instantly. Right at the start of your master timeline.
In another words, it is doing exactly what you would expect. A way around that behaviour is to have a super short .to() tween with duration, say 0.01, rather than a .set().
Here's a fork of our Pen, working as you would expect.
See the Pen BzQyZy by dipscom (@dipscom) on CodePen
-
Dipscom's post in How to control and switch between multiple timelines? was marked as the answer
There was the exact same question asked not long ago:
http://greensock.com/forums/topic/14408-how-do-i-replace-a-timeline-with-a-function-call/?p=61332
And here was the Pen with an answer:
See the Pen eZwrOG?editors=0010 by dipscom (@dipscom) on CodePen
-
Dipscom's post in Morph animation not working was marked as the answer
Hi Arif59,
Welcome to the forums! This is indeed the place for your GSAP related questions!
Thanks for the demo, it helps a lot.
MorphSVG works by changing the <path> data of an element so, you have to specifically target it. In your case, the id's you were using were at the <g> element. If you simply move the id's into the <path>, you will see that it works as expected.
-
Dipscom's post in Simple multiple tweet issue was marked as the answer
Hi glassbean,
Welcome to the forums!
The reason your <span> tags are not moving or scaling is because you have not set a position for them - either absolute or relative. Having said that, <span> tags are a quirky beast on themselves and do not behave exactly as a <div> tag by default. You would probably have to tinker with its default settings in order to make it so. If you try to tween a <span> after adding a relative or absolute positioning to them, you might not get the results you expect. You are better off using <div> tags.
See the Pen LNKrjZ by dipscom (@dipscom) on CodePen
Or, better yet, you are much better of using the SplitText plugin if you are tweening text.
-
Dipscom's post in TweenMax.set() moves to beginning of timeline was marked as the answer
Hi CraigS,
Welcome to the forums (Even though your profile says you're a long time member...).
What you are seeing is expected behaviour. The .set() method can be a bit confusing because it is a zero second tween and it render immediately. As you see, there, right at the start of the main timeline. You can set immediate render to false. Or you can change the method from being a .set() to being a .to() with a very tiny duration, like 0.01.
Change:
.set(greenBx, {visibility: "hidden"}) to:
.to(greenBx, 0.01, {visibility: "hidden"}) And you will have the behaviour you expect.
Here is a video where Carl goes over the immediate render property in more detail:
-
Dipscom's post in Orientate along bezier path was marked as the answer
Hey Joe!
Man, that was rather intriguing. The answer is yes, you can. The alignment of the arrow, is handled by the Bezier plugin. So, you just need to enable the 'auto-rotate'.
The catch is, as in all SVG related rotation: where is the origin of the element in the coordinate system. It took me a while to work out the order in which things needed to be done. But check out the fork I made of your example:
See the Pen GZPoYz by dipscom (@dipscom) on CodePen
The main thing to take away here is all transforms will be done from the top left of the element.
I am not very experienced with the MorphSVG plugin myself so, I can't explain too well why your initial setup wasn't working. But, there were some things not quite right and was messing around the calculations.
In order to make sense to me, I ended up simplifying the path data you had in the arrow. Also, watching the video Carl made, helped me understand the behaviour of the plugin and troubleshoot my mistakes. The video is in the docs.
http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/pathDataToBezier/
Thanks for the question, helps me learn stuff I otherwise wouldn't have the focus to.
-
Dipscom's post in Sprite Animation - (Not Working Properly) was marked as the answer
Hi SoL2Squiz,
Basically, your JS is failing because you are trying to load a JS file in CodePen that does not exist.
<script src="js/main.js"></script> // This will fail in CodePen and break your Pen. Remove it and it will work. Also, there is no need to add the CDN link in CodePen, you can add GSAP's library via CodePen's "Add External JavaScript" under the "Settings". Look for the button that says: "Quick-add".
After that, all that is left is to adjust your Tweening code. Look at the fork I made from your Pen, I also had to adjust some of your numbers that were a bit off.
See the Pen jqZPdm by dipscom (@dipscom) on CodePen
One last comment: If you are going to animate sprite sheets, you need to make sure the colors in the sprite sheet match exactly from one sprite to another. JPG is a rather bad file format for this as it creates slightly different shades of colors depending on the surrounding color per pixel. Look at the pen, watch how the graph flickers as it animates. You really want to use something like GIF or PNG for this sort of job.
-
Dipscom's post in Best way to add concurrent tweens? was marked as the answer
When I want more than one tween to start at the same point, I create a label for that point in time and use that as the position parameter:
tl.add("StartPoint"); tl.to($box, duration, { ease: 'Bounce.easeOut', width: 100 }, "StartPoint"); tl.to($box, duration, { // don't want bounce-ease on this property height: 300 }, "StartPoint"); Note that you can use convenience methods, like .to(), from(), etc, just like in TweenMax to build your timelines. You don't need to .add() each Tween in the Timeline.
Also, you can chain those methods. The bellow will produce the same results as the code above:
tl.add("StartPoint") .to($box, duration, {ease: 'Bounce.easeOut', width: 100}, "StartPoint") .to($box, duration, {height: 300}, "StartPoint"); Make sure you add ";" only in the last call.
-
Dipscom's post in Skydive animation was marked as the answer
You wish has been (partially) granted.
Here's a little way for you to animate your jumping products. It is not a complete solution as I do not have the time at the moment to go over the whole thing - Neither I should as that way, you won't be learning much. Take the code apart and see how much you can extrapolate from what you can see.
If something does not make sense, come back and ask away. Be happy to elaborate. Right now I just have to go back to work.
Happy Tweening.
amended.zip
-
Dipscom's post in left or top doesn't work for circle svg object was marked as the answer
To me, you are overcomplicating things. Is this going to be responsive?
You have a viewBox, a ratio and a fixed size to work with in the SVG - There should be no need to need percentages.
Even if it was meant to be responsive, because you have a viewBox, all would scale nicely anyway without the need of percentages.
See the Pen qZdOWp by dipscom (@dipscom) on CodePen
. Removed a bunch of things that were not needed and simplified your code. I also have rounded up some of the numbers, just because I think it is pretty and makes it easier to work with them in your head.
Have a look and study it, it should provide the answers you are looking for.
If you plan to be working with SVGs, is a good idea to go over the SVG docs and descriptions of attributes. Knowing how those things behave is very useful.
-
Dipscom's post in Get Timeline to "re-recognize" elements when DOM is updated was marked as the answer
Hi DRACO,
Is there any particular reason why you simply don't wait to create the timeline after your loading is finished?
Something along these lines:
See the Pen obMqjX?editors=0010 by dipscom (@dipscom) on CodePen
-
Dipscom's post in svg pattern transform browser compatibility was marked as the answer
WIN!
See the Pen zrBNLM?editors=1000 by dipscom (@dipscom) on CodePen
Take that, Microsoft. In yer face.
We can forgo the negative viewBox setup, instead use a <g> node with a transform. Check out the updated Pen. Checked via browserstack and it worked on everything that I cared to open on and that CodePen supported. So I guess this is a technique we can safely use now.
Off to make a hypnotic patter now to plaster on my profile. Thank you Bundy for the idea and challenge.
*fist up*!
-
Dipscom's post in multiple tweens/reverse was marked as the answer
It seems this is more of a ScrollMagic question, rather than a GreenSock one. (I hope the mighty CODE-GOD will not smite me from afar when I press "post" - forgive me oh mighty!)
Why is always a hard question to answer. There might be something else wrong on your code. Unless we can reproduce the error, we cannot really help. I have amended the pen I forked from you to something that, I think, resembles your question. It works fine for me.
-
Dipscom's post in High CPU usage with basic (but repeating) animation. was marked as the answer
Hi Stefffen Wenzel, welcome to the forums,
Are you getting 50% CPU usage constantly while testing? I had a quick look here and it does spike to 50% on load and all but after it goes down to 10-15%. Have a think of what else could be running in Firefox at the same time (extensions, plugins, etc). Have you tried running it in privacy mode? With all extras disabled?
Also, if you only get this unreasonable level of CPU usage, I would imagine the issue is with Firefox, not with your animation or GSAP itself.
-
Dipscom's post in Looping animation was marked as the answer
Hi fernandofas,
I am a bit confused as to what your struggle is. Your animation is already looping. If all you want is for it to loop three times, just change:
var tl1 = new TimelineMax({repeat: -1, repeatDelay:1}); to
var tl1 = new TimelineMax({repeat: 2, repeatDelay:1}); Also, a pet peeve of mine: When you say: "I want to loop the animations 3 times from start to finish" - you mean: "I want to play the animations 3 times from start to finish", right? Because if you say "loop 3 times", the animation will play 4 times.
-
Dipscom's post in DCM (Doubleclick Campiagn Manager) was marked as the answer
Hi friendlygiraffe,
The two things are not related. Local or session storage would be if you were trying to save something into the user's computer. Like, when you have a game and give them the option for the user to save his/her progress. Or an Ad that would save whether the user has seen it or not and present different/alternative content depending on it.
GSAP is an external library. I never know which one of the different heads of Google's Hydra Monster Presence but you should have your GSAP references to their CDN, unless it is going into AdWords. Check the bellow out:
http://greensock.com/forums/topic/12701-google-doubleclick-hosts-gsap-on-their-cdn/
-
Dipscom's post in Question about when CSS props are set was marked as the answer
What is happening you have explained quite well.
The .set() is being triggered right at the start of the master timeline.
As to why I can only speculate. What I see the reason being is because .set() is a 0 time event, there is nothing to use as a reference point when calculating its position. So, it happens instantly. However, if you tweak your code to have something happen before it or have set happen a second into the timeline, then, there is something to reference and you get the behaviour you were expecting.
I didn't fork anything because I am lazy but just add, 0.1 at the end of your .set() and you'll see pretty kitty's eyes.
You will have to ask the ALMIGHTIES for a more real reason why it happens. I can only offer what I think is happening. If you multiply anything by zero, you get zero.
-
Dipscom's post in GSAP Polite Load banner was marked as the answer
Polite loading is nothing other than waiting the page to completely load before loading the ad itself and as such, GSAP does not really have anything to do with it.
You can achieve a generic polite load by simply having your code run inside a window.onload() call, then load other scripts and images.
For example:
window.onload = function() { var imageLoader = new ImageLoader(); var scriptLoader = new ScriptLoader(); imageLoader.loadImage("idName", imageArray, ".imageExtension"); scriptLoader.loadScript("scriptURL"); } The ImageLoader and ScriptLoader are two little classes I wrote and use frequently. I have them stored in CodePen
See the Pen bdyEZY by dipscom (@dipscom) on CodePen
and See the Pen EjzPJB by dipscom (@dipscom) on CodePen
. Feel free to use/fork them.