{"id":606,"date":"2017-02-01T17:18:19","date_gmt":"2017-02-01T16:18:19","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=606"},"modified":"2022-07-25T08:35:46","modified_gmt":"2022-07-25T07:35:46","slug":"gsap-tweenlite-tweenmax-animation-example","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/gsap-tweenlite-tweenmax-animation-example\/","title":{"rendered":"GSAP TweenLite \/ TweenMax Animation example"},"content":{"rendered":"<pre lang=\"javascript\">var w = window;\r\n\r\n\/\/ Global tween variables\r\nvar TweenLite = w.TweenLite,\r\n\tTweenMax = w.TweenMax,\r\n\tTimelineMax = w.TimelineMax,\r\n\tSine = w.Sine;\r\n\r\n\/\/ To turn off RequestAnimationFrame:\r\nTweenLite.ticker.useRAF(true);\r\n\r\n\/\/ throttle back the frames-per-second to 30\r\nTweenLite.ticker.fps(30);\r\n\r\n\/\/ reduce lagSmoothing\r\nTweenLite.lagSmoothing(500, 20);\r\n\r\nvar addtimeLineAnimation = function (tl, s) {\r\n\tif (s.set) {\r\n\t\tTweenMax.set(s.$e, s.set);\r\n\t}\r\n\tif (s.from) {\r\n\t\ttl.insert(TweenMax.fromTo(s.$e, s.duration \/ 1000, s.from, s.to), 0.2);\r\n\t} else {\r\n\t\ttl.insert(TweenMax.to(s.$e, s.duration \/ 1000, s.to), 0.2);\r\n\t}\r\n};\r\n\r\nvar timeLineAnimate = function (anims, callback) {\r\n\tvar tl = new TimelineMax({\r\n\t\timmediateRender: false,\r\n\t\tonComplete: function () {\r\n\t\t\ttl.kill();\r\n\t\t\ttl = null;\r\n\t\t\tsetTimeout(function () {\r\n\t\t\t\tcallback();\r\n\t\t\t}, 0);\r\n\t\t}\r\n\t});\r\n\tvar i;\r\n\tfor (i = 0; i &lt; anims.length; i++) {\r\n\t\taddtimeLineAnimation(tl, anims[i]);\r\n\t}\r\n\ttl.pause();\r\n\tsetTimeout(function () {\r\n\t\tif (tl) {\r\n\t\t\ttl.play();\r\n\t\t}\r\n\t}, 100);\r\n};\r\n\r\nvar rotate3D = function ($e_new, $e_old, duration, property, reverse, callback) {\r\n        var vertical = (property == 'rotationX');\r\n        var radius = tools3d.getRadius($e_new, 4, vertical);\r\n        var origin = '50% 50% ' + (-round100(radius)) + 'px';\r\n\r\n        var degFrom = 90;\r\n        var degTo = -90;\r\n\r\n        if (reverse) {\r\n            degFrom = degFrom * -1;\r\n            degTo = degTo * -1;\r\n        }\r\n\r\n        var anims = [];\r\n        var anim = null;\r\n        if ($e_new) {\r\n            $e_new.parent().css('transformStyle', 'preserve-3d');\r\n            anim = {\r\n                $e: $e_new,\r\n                duration: duration,\r\n                set: {\r\n                    transformPerspective: 1000,\r\n                    transformOrigin: origin,\r\n                    backfaceVisibility: 'hidden',\r\n                    opacity: limitOpacity(1),\r\n                    transition: 'none',\r\n                    zIndex: 10\r\n                },\r\n                to: {\r\n                    zIndex: 30,\r\n                    ease: Sine.easeOut\r\n                }\r\n            };\r\n            anim.set[property] = degFrom; \/\/.from[property]\r\n            anim.to[property] = 0;\r\n            anims.push(anim);\r\n        }\r\n        if ($e_old) {\r\n            anim = {\r\n                $e: $e_old,\r\n                duration: duration,\r\n                set: {\r\n                    transformPerspective: 1000,\r\n                    transformOrigin: origin,\r\n                    backfaceVisibility: 'hidden',\r\n                    transition: 'none',\r\n                    opacity: limitOpacity(1),\r\n                    zIndex: 20\r\n                },\r\n                to: {\r\n                    ease: Sine.easeOut\r\n                }\r\n            };\r\n            anim.set[property] = 0; \/\/.from[property]\r\n            anim.to[property] = degTo;\r\n            anims.push(anim);\r\n        }\r\n\r\n        timeLineAnimate(anims, callback);\r\n    };\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>var w = window; \/\/ Global tween variables var TweenLite = w.TweenLite, TweenMax = w.TweenMax, TimelineMax = w.TimelineMax, Sine = w.Sine; \/\/ To turn off RequestAnimationFrame: TweenLite.ticker.useRAF(true); \/\/ throttle back the frames-per-second to 30 TweenLite.ticker.fps(30); \/\/ reduce lagSmoothing TweenLite.lagSmoothing(500, 20); var addtimeLineAnimation = function (tl, s) { if (s.set) { TweenMax.set(s.$e, s.set); } if (s.from) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-606","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=606"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/606\/revisions"}],"predecessor-version":[{"id":607,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/606\/revisions\/607"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}