PointC
-
Posts
5,072 -
Joined
-
Last visited
-
Days Won
411
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Everything posted by PointC
-
Hi Fusion2222 , That tween will just keep repeating from the beginning. Please give this a try: function forever() { TweenMax.to(obj,5,{x:"+=150", onComplete:forever}) } forever();
-
Hi justin_rings , Welcome to the forums. Is this happening in all browsers? or just one particular one? Without a CodePen example or knowing which browser is causing trouble, I'm just going to take a shot in the dark here: Have you tried the following: -webkit-backface-visibility:hidden; Additional potential fixes may be to add transformPerspective to your element or set force3D:false on your tween. (force3D:auto is the default) Check out this forum post which may offer additional possibilities: http://greensock.com/forums/topic/11146-3d-transform-matrix3d-artifacts-blurry-elements-in-safari-osx-and-ios/ Also - you are using the latest version of GreenSock, correct? If none of those things fix it, others may jump in with some ideas. If you could post a CodePen so everyone could try out your code, that would get you the best answers. It doesn't have to be your actual project. Just a stripped down version with some plain divs that recreate the problem is perfect. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully this helps a bit. Happy tweening.
-
You're very welcome - happy to help. It can be a bit confusing when you first start using SVGs. When you scale an SVG and let the child element 'escape' the viewBox with overflow:visible it can get especially confusing - as you found out. Also - don't forget - you can also target the SVG itself for animation. Happy tweening.
-
Yep - you are correct - the child rectangle is approximately 78% of the width of the SVG. I think I may have called your actual SVG 'the square' before and your parent div is actually named square so let's clarify: You are right - 7.2 x 7 has nothing to do with pixels. It's units, but unless you specify another unit (em, pt, cm etc...) it's assumed to be equivalent to the same number of pixels. If you take that SVG and put it into your div (called square) which is 48px, the SVG is going to expand to 100% of its parent so the SVG is now 6.67 times bigger which means the child rectangle is now approximately 36px. The scale and coordinates have all grown by 6.67 times. So... you ask it to move 100px (units) and you're going to get 6.67 times that movement. Try this little experiment. Go back to your CodePen and change the size of your containing div to 7.2px wide instead of 48px and watch what happens. You'll see the correct 100px movement on x followed by 50px on y. (but it will stay at original size) After that - just for fun - remove the containing div and watch how huge that rectangle gets.
-
The thing to remember about SVGs and controlling them is that they operate in their own little coordinate world governed only by their viewBox. Unless you tell it otherwise, an SVG is going to expand out to 100% of its parent. 100px inside an SVG may not necessarily appear as 100px on your screen. So... if you make an SVG that is 100px by 100px with a 10px by 10px child rectangle inside it, but you put the SVG into a parent div that is 1000px by 1000px, your SVG would expand out to 1000px and your child rectangle (as you see it on the screen) would appear to be 100px by 100px. It's relative to the SVG - not the screen. In your case, your 7 by 7 SVG expands out to 48px wide - nearly 7 times its starting size. I made a quick little CodePen for you to show this happening. You'll see the exact same 400x100 SVG in all 3 containing divs, but the first div is twice as big as that and the third is half that size. I have one tween telling the child rectangle to move 350px on the X and then 50px on the Y. The only animation that is actually playing at that size is the middle one because its parent is 400px by 100px - (the exact size as the SVG). But they all look correct because everything has scaled up/down proportionally. http://codepen.io/PointC/pen/QyjMaW It can be a bit confusing to wrap your mind around the viewBox, but once it clicks, you'll see that it's really powerful. I'd recommend reading this article by Sara Soueidan: http://sarasoueidan.com/blog/svg-coordinate-systems/ I'd also recommend following her on social media. She has written a lot on SVGs and she's pretty darn smart. I hope this helps a bit.
-
Hi Juc1 , This is the size of your SVG viewBox - 7.2 x 7 viewBox="0 0 7.2 7" style="enable-background:new 0 0 7.2 7;" xml:space="preserve"> This is the size of the child rectangle that you are animating: 5.5 x 5.5 positioned at x:0.8 and y:0.8 inside the viewBox <rect x="0.8" y="0.8" class="st0" width="5.5" height="5.5"/>
-
Hi BlackPixel , Welcome to the forums. I'm having a little difficulty understanding all aspects of your question. If you could make a CodePen that would be great. Everyone can then see your code in action and give you the best answers. It can just be a simplified version of your actual project using plain colored divs etc... Here are instructions on how to make a CodePen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ In the meantime, I think this thread can help you: http://greensock.com/forums/topic/13303-slides-animation-for-bootstrap-carousel/ For sliders, you'll find a great pen from Blake here: http://codepen.io/osublake/pen/ZbdxRx/ Diaco has some really cool examples here: http://codepen.io/MAW/pen/XmozON http://codepen.io/MAW/pen/yYradO Hopefully that gets you started, but as I mentioned, a CodePen would be very helpful in getting you the best answers. Happy tweening.
-
I'm pretty sure I've got it straight in my head now. I'm glad we had this lengthy discussion though. This question is almost assuredly going to come up again as I see quite a few people trying out 3D cubes and now there will be a nice little reference for those searching the forums for an answer. Thanks for the clarification Jack. That's why you wear the cape.
-
So... if everyone would have listened to Blake back in post #4, we could have saved a lot of typing.
-
So really what it comes down to for DomiRaza or anyone trying this type of cube is you'll have to treat the animation of those two sides differently. You won't be able to just have one transform animation on the same axis for each of the 6 panels.
-
@Jonathan - yep - understood. For some reason, I just find using the Z to be comforting.
-
ahhh... I see what you're saying. Cool demo BTW! I actually do a lot of 3D modeling and animation so my mind is always on a pos/neg orientation and x/y/z way of thinking. With 3D animation you always have the option of using local or world coordinates which makes visualizing everything pretty easy. If CSS transforms were only as easy, we could transform everything into position, parent it to a null and animate anything we wanted like the 2.5D system in After Effects.
-
@Blake - are you saying that all axis orientations come along for the ride when you rotate the div? so in your example: You rotate the div on the x axis 90 degrees to lay it flat. You then animate around the y axis and get a spinning record, but if the axis orientation was relative to the newly transformed div, wouldn't the y axis now be aimed in the same direction as the z-axis was originally and the animation wouldn't work correctly?
-
I just updated my pen with a version that works like you'd expect. rotate it flat on the x:90 and then up to the right with z:90 and it's in the same position as a y:90 and now rotates around the y axis correctly (which looks like it would be the x axis). http://codepen.io/PointC/pen/WrwGrg
-
yeah - this is definitely a Jack or Carl answer I'm looking forward to reading. It's just really confuses me because in my little demo - test1 and test2 are just opposites of each other - you'd think it would be so easy. What is so special about that darn x axis?
-
Yep - that's the exact same problem you two were discussing. Rodrigo's pen certainly shows the rotational behavior you'd expect, but it only works using CSS animations? This is just odd to me. Is there a reason for this or am I missing something? I didn't see Jack or Carl in on your discussion back then - is there some light they can shed on this behavior?
-
I don't know guys - there is some weirdness here that I don't quite understand. Rather than make a cube, I made a quick pen with a single div for a simple test. When you rotate that div on the x and spin it on the y, you get a flat rotating record like you'd expect. The same expected result happens if you rotate it on the y and then spin it on the z, but as soon as you rotate it on the y and spin it on the x, you get the spin happening on the z. http://codepen.io/PointC/pen/WrwGrg
-
The crowd goes wild as the rookie wins an answer battle against the veteran. Actually, I think you were just busy posting on another topic.
-
Hi maxedison , Welcome to the forums. You would just need to use the convenience method of set(). TweenMax.set(yourElement, {opaciity:0}); More reading here: https://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/ Happy tweening.
-
Sure, just when I think I'm understanding a few things around here, you two go and start talking over my head. Actually, i think it's cool when you bring up things outside the everyday code around here. It forces me to fire up the Google machine and do some reading. Thanks to both of you for the extra ideas on implementing a check for these situations.
- 18 replies
-
- 1
-
-
- draggable
- throwprops
- (and 1 more)
-
@Blake - nice function - I'm gonna use that. I have another project coming up that will be the same idea, but a dial instead of a horizontal dragger. (spin the dial get another slide) Since you're seeing some rounding errors on this.rotation, would you recommend just being proactive and feeding the result into that function to be on the safe side?
-
CSS transitions? What are those? Happy to help. I'm glad you found a solution.
-
Hi elegantseagulls , You wouldn't really need the classes. You can just check if the timeline is reversed and play if it is and reverse the play if it isn't. http://codepen.io/PointC/pen/jWWdWb Happy tweening.
-
I think the OP means that the some of the panels don't rotate correctly when you click the 'rotation x +45' or 'rotation x -45' buttons next to the cube. I didn't even realize those were buttons the first time I looked at the pen.
-
HI d11202 , I think the best practice would depend on what you're hoping to accomplish. If I'm understanding your question, I'd guess you'll want to set up some bounds for the draggable along with a snap array and maybe a hit test? Do you happen to have a CodePen available with your basic layout? That would definitely help everyone as they attempt to answer your questions. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ You've probably seen the draggable docs page, but just in case - lots of good reading here: http://greensock.com/docs/#/HTML5/Drag/Draggable/ Happy tweening.
