Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'tweenmax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hi i have multiple div like #animate123 when the cubic beizer ends the the div will disappear (smoothly reduce the width and height or scale till the bezier track ends) var tween = TweenMax.to("#animate123", 5, { bezier:{ type:"cubic", values: [{"x":178.853394,"y":292.738353},{"x":178.853394,"y":292.738353},{"x":461.554575,"y":189.214815},{"x":640,"y":255.010604}], autoRotate:["x","y","rotation", 0, true] }, ease:Power1.easeInOut},{className: "+=fish"}); please help me
  2. I am trying to create a rain effect using TweenMax. I have a solution (see my codepen), but I just wanted to know if there was a better way of achieving this? Any thoughts, feeling or advice would be appreciated.
  3. I've got a number of timeline functions that are set inside of an object so that I can call them programmatically. You click a button with a number as a data attribute and it call a timeline method on one of these functions, like functions.function1.play(). I can get them to play(), but reverse() doesn't work. Am I missing something simple? var box = document.querySelector('.box'); var play = document.querySelector('.play'); var reverse = document.querySelector('.reverse'); var functions = { scale: function() { //console.log(this); var tl = new TimelineMax({paused: true}) .to(box, .5, {scale: 2}) return tl; } } play.addEventListener('click', function() { functions.scale().play(); console.log(functions.scale()); }); reverse.addEventListener('click', function() { functions.scale().reverse(); //alert('hey'); });
  4. Hi, I just came across this wonderful product and realized this is exactly what I need! I have a huge image that is x times the window size, so I want to scroll to the very bottom of it on button click. I would do so with CSS like this: @keyframes { to { transform: translateY(-100%) translateY(100vh); } } This proved to be a crossbrowser way in CSS instead of: transform: translateY(calc(-100% + 100vh)) .Is there any way to do so with TweenMax? I do understand that I can calculate these values in pixels and specify them explicitly: var value = -$('img').height() + $(window).height(); var tweenDown = TweenMax.to("img", 5, {y: value}); However the advantage of the "stacked" way is that when you resize the window, it keeps the image in the same position. Thanks in advance!
  5. Hi everyone! I am working on a project at the moment, and I am using this code snippet: TweenMax.set(convertForm, { y: -30, autoAlpha: 0, force3D: true }); *Note I have tried without the force3D too. And it is generating the following CSS: visibility: hidden; opacity: 0; transform: translate3d(0px, -30px, 0px); However the problem I am having is that the transform doesn't have any vendor prefixes, how can I change this, as I need the animation to work across multiple browsers. Many thanks in advance!
  6. Hello, i'm trying to make splittext animation on scroll using scrollmagic, the animation works but every animations are playing when windows is load, and i want my animations works when the parent section of my "content__text" div is in the viewport Anyone can help me to fix it ? http://codepen.io/AdverisTeam/pen/aJebRJ
  7. Hi I have problem when animating with CSS calc(). It's just jump to new position, without delay and animation. Is there any special way to do css math when tweening? How to make tween relative to viewport or container?
  8. Hi all! I'm noticing an issue with GSAP merging in transform properties originally formed in the CSS. I've attached a CodePen to show the issue. In Chrome, you'll see that both Dropdowns align to the center as intended. But in Firefox, IE11, and Edge -- it looks like the transform matrix that is generated is not including the calculated width of the dropdown component when transitioning. We can't use fixed widths (in the example that works) for a certain application, and found it really odd that only Chrome and Safari are handling this alright. Let me know if you need anymore info. Thanks as always!
  9. Hi Guys I have a simple Tween that I'm linking to a scroll magic trigger. I'm unsure if my problem is GSAP related or Scroll Magic (if it is a SM issue I appreciate this is off topic). Basically I have GSAP and the GSAP for SM plugins running (i've copied the stacking order for the scripts into the codepen JS settings to mirror what i have running on the site), and I would like it so when the user scrolls the tween is fired. What is happening though is the Tween I have loaded into the scroll magic controller if firing on page load. I've made a really simplified version of the problem here : http://codepen.io/emilychews/pen/WpYgWe Any help or suggestions would be amazing. Emily.
  10. I tried to add a border to a banner Ive made, but none of the tries worked i tried .to(type1, .3,{backgroundColor: "#000000", border:"40px #00a1d6 solid"}) I tried with an inset and i get the same effect but I dont want it to be transparent. .to(type1, .3,{backgroundColor: "#000000", box:"inset 0 0 0 7px #00a1d6 solid"}) I like how it looks with the inset but I the only thing about it is the shadow effect and how things can be seen under the inset once the logo passes by. Here is my codepen
  11. Hello All, We're using ScrollToplugin and Tweenmax library with ScrollMagic plugin,noticed TweenMax-> Scrollto operation not working. I want to pass OffsetY on the pinning element but TweenMax - offsetY parameter not accepting also scrollTo-> Y option not working with element-id only working with numeric value. As mentioned on the greensock tutorial (https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/) for add some margin top we can use offsetY option with numeric value but unfortunately its not working,no any error in console log . Please see this code-snippets http://codepen.io/karamveer/pen/xqjYQg and suggest what else from our side? Thanks in advance Thanks, Karamveer Singh
  12. Hello there, How would I go about creating 'masks' on the sides of my page where the elements slide in? I see this done very well on this infographic https://www.ceros.com/examples/visage-data-storytelling/ Thanks in advance EDIT: Obviously I am new to use lots of tweens on 1 page - is there a way I can minimize my code? Cheers
  13. Hello I've got five Box and five buttons. I want the first button, the display Box1 and other boxes are hidden. Button 1 => Box 1 Button 2 => Box 2 Button 3 => Box 3 Button 4 => Box 4 Button 5 => Box 5
  14. I'm desingin the web site that it's structure is like scrollmagic. what do i have to do to make the tweenmax animation codes play when it arrives at anchor(#sample)?
  15. Hey I'm currently working on a touchscreen which let's say for simplicity sake, just has a fullscreen bitmap image, the image is of a book and I wan't to be able to zoom into certain parts of this old book. Around this bitmap of the book, I've placed invisible DIV's to click on, when clicked, I would like the entire bitmap, to center the invisible box, by scaling up the entire bitmap. Basicly like the Zoomooz.js library, but I just know there must be a way to do it with GSAP ................. ................. . . . . . . Result should be: . X . With the "invisible" dom element zoomed in, but by using the viewBox. . X . . . ................. ................. When reading around the forums, I came across this post, which exactly does what I want, but this whole viewBox thing, seem to be a SVG thing, and therefor no help. This post Any ideas? Codepen: http://codepen.io/Abarth77/pen/MpJagb?editors=1111 The File: Zoom.zip
  16. Hi I'm going to be adding an image gallery to a site and I basically have it so that when you click on an image, the image is cloned and reappears in the centre of the window. The codepen is here: http://codepen.io/emilychews/pen/YZGxWZ I would like it so that the cloned image goes through a transformation to arrive in its new position. At the moment when you click on the image, the clone just appears in the middle of the window. I can't seem to get my head around how to have it so wherever the image is on the screen, it smoothly transitions to the central position. I tried swapping out the CSS object in my JS with some tweens, but this was a bit of a non-starter. I'm quite up on the functionality of Greensock tweens and timelines now, however, I'm at a bit of a loss how to approach this. Any help or pointers would be amazing. Emily. For quick reference I've also cut and pasted the JS / HTML and CSS code below: JS $(function() { // ===== vars to evaluate the left positioning after the element is cloned. var $windowWidthMiddle = $(window).width()/2; var $holderWidthMiddle = $('.holder').width() * 1.5 / 2; var $left = $windowWidthMiddle - $holderWidthMiddle; // ===== vars to evaluate the top positioning after the element is cloned. var $windowHeightMiddle = $(window).height()/2; var $holderHeightMiddle = $('.holder').height() * 1.5 / 2; var $top = $windowHeightMiddle - $holderHeightMiddle; // ====== Clone each image when clicked - these all have the default class '.holder' $('.holder').on("click",function() { if ($( this ).find(".cloned").length == 0) { // if not cloned already var $myClone = $(this).clone() .insertAfter(this) .addClass('cloned') .css({ position: 'absolute', left: $left, top: $top, transition: 'all 1s' }); // ===== This adds the small 'x' to the cloned image to close it $myClone.prepend('<div class="closeX">X</div>'); } }); // ====== This is what causes the cloned image to be closed / removed $(".wrapper").on("click", ".closeX", function(e) { e.stopPropagation(); // this stops the click on the holder $(this).closest("div.cloned").remove(); }); }); CSS .wrapper {width: 100%; height: 100%;} /* This is each image before cloning */ .holder { width: 20vw; height: 100px; background: red; position: relative; margin-bottom: 5px; display: inline-block; z-index:0; transform-origin: top left; color: white; } /* The positioning 'top' and 'left' values after cloning are added in the javascript */ .holder.cloned { background: blue; z-index: 20; transform: scale(1.5); } /*CSS for the prepended 'x' that shows on the cloned element*/ .closeX { position: absolute; background: yellow; top: 5px; right: 5px; width: 25px; height: 25px; line-height: 25px; text-align: center; cursor: pointer; color: black; } HTML <div class="wrapper"> <!-- five images --> <div class="holder image1">Image 1</div> <div class="holder image2">Image 2</div> <div class="holder image3">Image 3</div> <div class="holder image4">Image 4</div> <div class="holder image5">Image 5</div> </div>
  17. Hello, I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk. My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth. Any and all assistance would be greatly appreciated, my code is below. jQuery(document).ready(function($) { // Scroll Magic Controller var frontPageAnim_Controller = new ScrollMagic.Controller(); //Scroll Magic Controller // Animation vars var htmlContainer = $('html'), body = $('body'), viewPort = $(window).height(), // Height of viewport heroSection = $('.hero-section'), panelClickthroughs = $('.panel-clickthroughs'), portfolioPanels = $('.portfolio-panel'), portfolioSection = $('.portfolio-section'), socialSection = $('.social-section'), scrollDown = $('.scroll-down'), scrollDownArrow = $('.scroll-down i') header = $('header'), heroContent = $('.hero-content'), logoContainer = $('.logo-container'), logo = $('#hype-logo'), letter = $('.letter'), letterFill = $('.letter_fill'), logoBorderBottom = CSSRulePlugin.getRule(".logo-container:after"), overlayMenu = $("#overlay-menu"), listItemsOverlay = $("#overlay-menu #primaryMenu ul li"), heroBackground = CSSRulePlugin.getRule(".hero-panel:before"); var fadeSlogan = function () { TweenMax.to(header, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(heroContent, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(scrollDown, 1, { y: 0, autoAlpha: 1 }); }; function urlChecker() { if( window.location.href =="http://2017.hypemarketing.uk/" ) { var otherAnimations = new TimelineMax({ immediateRender: true }); // Start New timeline for all other animations otherAnimations .set(heroBackground, { opacity: 1 }) //has been set in css to remove skip .set(logo, {visibility:"visible"}) .set(letterFill, {visibility:"hidden"}) .set(header, {y: -80, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(heroContent, {y: -15, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(scrollDown, {y: 30, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }); } else { //Do nothing } } urlChecker(); // TweenMax Timelines var timelineHero = new TimelineMax({ immediateRender: true }); // Start New timeline for Hero Section & Portfolio var entranceAnim = new TimelineMax({ immediateRender: true }); // Start New timeline for Entrance Anim timelineHero .set(heroSection, { top: 0, position: 'absolute', force3D:"auto" }) .to(heroSection, 0.4, { top: -viewPort, opacity: 0, ease: Power2.easeInOut }); // Animation for timelineHero entranceAnim .set(logoBorderBottom, { ease: Power2.easeOut, force3D:"auto" }) .set(letter, {fill:"none", force3D:"auto", stroke: "00ffbc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round"}) .fromTo(letter, 3, {drawSVG:0}, {drawSVG:"102%"}, 0) //now animate the logo strokes (note we use "102% as FireFox 34 miscalculates the length of a few strokes) .fromTo(logoBorderBottom, 3, { width: 0 }, { width: 100 + "%" }, 0) //draw out the load under hype .to(letterFill, 1, {autoAlpha:1, ease:Linear.easeNone}) //fade in the real logo and the rest of the text .to(letter, 1, { stroke: "ffffff;", ease:Linear.easeNone }) //fade the stroke to white .to(heroBackground, 3, { opacity: 0.9, ease: Power1.easeIn, onComplete: fadeSlogan }, 0.3); //fade the background // Scroll Magic Scenes var heroAnimation = new ScrollMagic.Scene({ triggerElement: heroSection, triggerHook: 0, duration: 1 }).setPin(heroSection).setTween(timelineHero).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Hero Section var portfolioSectionAnimation = new ScrollMagic.Scene({ duration: viewPort/2 }).setPin('.portfolio-section', { pushFollowers: true }).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Portfolio Section // Scroll Down Button Begin TweenMax.set(scrollDownArrow, { transform: 'translateY(0)' }); TweenMax.to(scrollDownArrow, 1, { autoAlpha: 0, repeat: -1, transform: 'translateY(10px)' }); scrollDown.click(function(){ TweenLite.to(window, 0, {scrollTo:1}); // Scrolls 1px on scroll to initiate the Hero Section sliding out }); // Scroll Down Button End });
  18. I've been working on an animation that works standalone as expected on scroll, it basically staggers on scroll so each path in my SVG animated in fast fade on scroll down, and fade out on scroll up. I was looking at this article but cannot work out how to import the scripts and get it running via RequireJS like I can standalone: https://github.com/janpaepke/ScrollMagic/issues/160#issuecomment-59058452 Here is my code example, it's WIP so the code is not absolutely correct yet. require.config({ baseUrl: '../ScrollMagic/js', paths: { TweenMax: '_dependent/greensock/TweenMax.min', TimelineMax: '_dependent/greensock/TweenMax.min', ScrollMagic: 'jquery.scrollmagic', ScrollScene: 'jquery.scrollmagic', "ScrollMagic.debug": 'jquery.scrollmagic.debug', jquery: '_dependent/jquery.min' } }); require(['jquery', 'ScrollMagic', 'ScrollScene', 'ScrollMagic.debug'], function( $, ScrollMagic, ScrollScene, debug) { // do stuff }); This is a cut down version of my working code: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> <script> // init controller var controller = new ScrollMagic.Controller(); </script> <div class="spacer s_viewport"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve"> <g id="mainsvg"> <path d="..." /> <!-- x27 of these pathes --> </g> </svg> <script> // build tween var tween = TweenMax.staggerFromTo("path", 2, { opacity: 0 }, { opacity: 1, ease: Back.easeOut }, 1); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#mainsvg", duration: 200 }) .setTween(tween) .addIndicators({ name: "staggering" }) // add indicators (requires plugin) .addTo(controller); </script> <div class="spacer s_viewport marker"></div> Can anyone help please? Thanks in advance!
  19. OK, so I've properly enqueued TweenMax.min.js in my Wordpress install, in my child theme's functions.php file. It's loaded, as a check of the page shows. Just to make sure it's working, I added this test code to a page's footer code: <script type="text/javascript"> var blinkText = document.getElementsByClassName("blinking"); function blink() { TweenMax.to(blinkText, 0.3, { autoAlpha: 0, delay: 0.3, onComplete: function() { TweenMax.to(blinkText, 0.3, { autoAlpha: 1, delay: 0.3, onComplete: blink }); } }); } blink(); </script> When this page loads, the text doesn't blink and the DOM inspector shows an error, reporting "Uncaught ReferenceError: TweenMax is not defined." I don't have much JS experience, but obviously I've missed something simple, and obvious. Can someone help me out here? TIA! SOLVED: Ach, what a pain. It was just a case of script loading and timing. I changed the example code to what I pasted in below, and it works fine in WP, via the OH Add Script Header Footer plug. This plug makes it simple to add things like GSAP scripts on a per-page basis without having to create separate files in the WP child theme. <script type='text/javascript'> // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, stylesheets, JS, and links) window.onload = function() { //fade out and set visibility:hidden TweenMax.to(blinking, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenMax.to(blinking, 2, {autoAlpha:1, delay:2}); }; }); </script>
  20. Hi all, like the topic already mentions do I have a problem with stuttering animations inside my TimelineMax animation and it would be really great, if somebody of you could help me. I'm currently developing a system for our company in which images and videos of our work can be uploaded/selected with the help of a CMS. These media should be animated afterwards, so that it looks like a dynamic generated showreel. So I used PHP to dynamically generate the JavaScript code and basically it works, but as you can probably see in the Codepen or in the demo, especially in Chrome the animations are stuttering a lot (depending on your computer/device). I have to say that I'm new to Greensock and also not the most experienced developer, so I would appreciate every advice of you. Regarding my code I guess there's a lot of potential for optimization. Especially the way of adding the subtimelines to the maintimeline and calling the functions of the subtimeline is probably wrong. For example: var mainTimeline = new TimelineMax({repeat:-1}); mainTimeline.add(websiteTimeline(website)); function websiteTimeline(website) { MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); // Create sub timeline var timeline = new TimelineMax(); // Add tweens to sub timeline timeline.call(morphToPhone); function morphToPhone() { TweenMax.to("#bezel-macbook", 0.2, {morphSVG:"#bezel-phone"}); TweenMax.to("#camera-macbook", 0.2, {morphSVG:"#camera-phone"}); TweenMax.to("#screen-macbook", 0.2, {morphSVG:"#screen-phone"}); TweenMax.to("#shape-macbook", 0.2, {morphSVG:"#lock-phone", css:{opacity:0}}); TweenMax.to("#line-macbook", 0.2, {morphSVG:"#speaker-phone", css:{opacity:0}}); TweenMax.to("#touchpad-macbook", 0.2, {morphSVG:"#lock-phone"}); } } I also already read about the performance differences between JavaScript and CSS, so my next step would be to use more pure CSS and less TweenMax animations, but I wanted first ask you guys, if you have some better advices for me. I hope anyone of you can help me. Here again the links to my Codepen and demo... Codepen: http://codepen.io/mathis-krueper/pen/ZeQEzZ Demo: http://mathis-krueper.de/captain/references/ Thanks in advance!
  21. GreenSock Community, Thanks for taking the time to read this post, also thanks in advance for any help you may provide. I have a modal that scales up a selected thumbnail into a scrollable slide container. Please note the CodePen only has the "Advil" link set to call in Ajax content (HTML and JS) from another CodePen Ajax-Modal-Content I have two problems with the Tween Path: The starting position does not seem to be the correct coordinates, despite my using that part of the code exactly as what the original example is using (see getPosition function and the rect var). I'm having an issue with the path animating on an arc (curved path). I think this is due to my using Top 50% and Left 50% along with transform/translate to center the image within the browser's window)... I seem to remember reading somewhere in the GSAP forums that this is due to the rendering order... that Top/Left/Right/Bottom are calculated last... if this is true, do you have any suggestions on how to center the image within the browser's window and solve this render order issue? The modal is based on a CodePen by one of the GreenSock Moderators (thanks again Blake for all the help Responsive Grid ). Also,the slide container is based on another GreenSock Community Member's example (thanks Chrysto http://codepen.io/bassta/pen/kDvmC). I have made the main part of the tween set to 6 seconds (slowing it down) so you can see how the starting position is off and how the top and left calculations happen at the end. Thanks again for any help/guidance.
  22. Hi, We are having issues trying to finesse a card folding animation. Basically we would like to have a square with sides folding out from within the square to create an unfolding effect. If you take a look at the Codepen you should be able to get an idea of the effect. We are currently using scaleX but unsure if this is the best and way to achieve this type of effect? Many Thanks
  23. Dear Greensock Community, my task is simple and clear: I want to rotate a svg group <g id="rotationFrame>. I have written the following TweenMax to achieve this: TweenMax.to("#rotationFrame", .5, { rotation:rotationDeg, transformOrigin:"50% 50%" }); This does work quite good using safari. But as soon as I switch to Chrome the code does some crazy stuff: Demo: https://vid.me/9EJU How can I solve this? To me it seems like Greensock is creating some wired css code, like transform-origin: 0px 0px 0px; transform: matrix(-0.86602, 0.49999, -0.49999, -0.86602, 957.167, 575.015); As soon as I change this manually to something more straight forward, it does work in chrome: transform-origin: 50% 50% transform: rotate(90deg);
  24. I'm looking for any suggestions as to what might cause the bug I'm currently experiencing in TweenMax 1.19.1 -- I've run out of ideas. Here are the basics: I'm doing a TweenMax.staggerFromTo transformation that simply moves several elements from -20px and 0 opacity to 0px and 1 opacity. The classic "fade in from the left." The animation runs perfectly except that, with the most recent update to TweenMax, the opacity portion of the tween is being skipped altogether. The opacity of the elements is never modified and, even with clearProps not being used, opacity is not left in the Styles attribute after the transformation. The result is that the elements appear on the screen, then move 20 pixels to the right in sequence with no fade in. Some additional information: This bug appears in 1.19.1 only. I can switch back to TweenMax 1.19.0 and it won't appear, switch again to 1.19.1 and it will. So it's something that changed between this version and the last. I've tested in on Chrome and Firefox so it isn't just a single browser. While I've copied the basic situation in a Codepen, I cannot seem to reproduce the bug. There's a lot going on on this page, but no other modifications to this element take place before the Tween with the problem. I've tried adding every CSS attribute assigned to the real element to the Codepen element and I've reproduced the nested function/promise/function structure of the js, but I can't get the issue to appear. The attached pen does show the context, at least. If I set the debugger to break on attribute modification, in 1.19.0 it breaks first on the opacity part of CSSPlugin.js at line 2611. In 1.19.1 it breaks on the matrix portion of CSSPlugin.js at line 1722, skipping the opacity code entirely. If I try to modify only the opacity and not the position, it does nothing at all and no attributes are modified on that element. It's definitely only the opacity tween that's affected. Any thoughts on what has changed in 1.19.1 that could lead to opacity being skipped in a staggerFromTo under certain conditions? I'd prefer not to have to freeze Greensock updates on this project and stay with 1.19.0 for good, but I've spent more than a day on this and I still can't figure out what might be causing this deeply obscure problem.
  25. Hey guys, I'm trying to figure out how to make this fish vector appear to make a flopping in-air animation. At first I was thinking that MorphSVG would be the ideal tool for this, but then diving deeper I'm noticing that there's so many paths I believe I would have to find an ideal shapeIndex for each to get a fluid motion. Transform gives off the whole 2D vibe since I'm using scale -1 to give the appearance of a reflection during the flopping animation. This is a link to a primitive attempt to use MorphSVG http://codepen.io/dylan9o4/pen/bgQLyP And this is a link to a primitive attempt using regular transforms http://codepen.io/dylan9o4/pen/dNQdxe Any help would be greatly appreciated!
×