Search the Community
Showing results for tags 'inline'.
Found 5 results
-
Hi! I would like to make a snowing animation with one or two inline svg snowflakes and I made a pen with a small success :) Is it possible to multiply the inline svg snowflakes with JS to animate them? Or how could I solve this problem? Thanks, szsoma
-
The time has came again to pour clean water into the glass. I have started to precisely unravel the mistery of Sizmek as size calculation method. I was unsuccessful. What is know at the moment from my experiments is they are definitely zipping and counting the backup image into the ad's size. But I still don't understand how they compress. I am using 7Zip with the default compression settings and my .zips are bigger than their calculated value. For instance: in case of an 213k .zip, they see 193k from it, which is a 20k difference. I have tried to delete the assest from the zip one at a time, to see what is causing this difference, but i haven't found any file which is adding 20k to the .zip. I don't think they have the ultimate comressor which is better than 7z or the default Windows zipper, this leads to the suspicion: they are excluding something. Could anyone can help me to assemble the right calculation formula? Update: It gets even weirder when I am inlining all the assets into the .html. My .htm file is 217k, backup.jpg is 24k which gives a 171k .zip. Their calculator is displaying ONLY 88k. ( Don't tell anyone but this way we can make huge ads in outstanding quality )
-
Hi guys, I was just looking for a bit of advice/a bit of a discussion about the pro's and con's, and the way you guys handle classes when it comes to animating essential page elements. For example, if you're using GSAP to have a modal window speed in from the left, a full-screen overlay grey's out the background. At this point the first animation ends, as the user needs to do something (input an e-mail address, for example). After which the modal window zooms off, and the full-screen overlay is removed, and the page is usable again, which is a separate animation. In this example there were three states; the Initial State, the Interactive State, and the End State (I just made those up), and at each of these points, different classes need to be applied to each of the elements involved (the background overlay, the modal box, etc.). Baring that in mind, is it best to animate the classes, using ClassName, or to use the standard inline-styles, and maybe apply the new classes/remove old ones at the end of the animation with a set/onComplete? Are there sometimes benefits to doing one over the other? This is more a question about best-practice I guess, rather than a specific use-case. I've just been learning about BEM recently, and it's got me thinking a lot about how to most efficiently and develop maintainable projects. I'd really appreciate any opinions/takes on this matter, as I really love both the BEM style of development as well as the GSAP suite. Thanks guys.
-
1st post and it's a little rough... - I've been trying to create some hover animations on an SVG lately. Take a look at the codepen link (hover on x) to see where I'm at... My goal is to hover on the "X" and have the "A" flip/rotateY(180deg) to reveal. And when the mouse is off, have the "X" flip back. I will also mention/ask for further help having the diamond animate up and then back down relating directly to the hover of the "X". notes: - I know the "X" and "A" svg <path d=> are what is causing the width to be so far apart on rotation. This is to have the "X" in the correct placement within the file. (I have tried 'cropping' the SVG of "X" and "A" but the position/location is off. Question: - can I set a rotation orgin point manually? or do you think I should even be using more JS/GSAP to accomplish these effects? *There are actually even more interactions I have thought up - however they can wait until this problem is resolved, Thanks for ANY & ALL help! (I haven't found many examples of SVG hover animations)
-
Hello, my problem is, I have some styles inline in a element: <div id="myDiv" style="display: inline-block; position: relative;">Some Text</div> And I'm trying to animate this div, like this: TweenMax.to($('#myDiv'), 0.6, { parseTransform: true, alpha: 1, left: 0, top: 0, scale: 1, ease: 'easeOutBack' }); How can I use TweenMax without removing my inline styles? Thanks.
