Jump to content
Search Community

Search the Community

Showing results for tags 'timelinemax'.

  • 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
  • Supercharge

Categories

There are no results to display.

Find results in...

Find results that contain...


Date Created

  • Start

    End

Last Updated

  • Start

    End

Filter by number of...

Joined

  • Start

    End

Group

Personal Website

Twitter

CodePen

Company Website

Location

Interests

Found 486 results

5
6
7
...
20
Page 6 of 20  
  1. sirwin
    Hello! I'm very new to GSAP and Scrollmagic, but I'm wondering about how to do something specific. I will provide a link below, but basically what I'm wanting to know how to do is have an element tween to a specific point on scroll, then pause, then complete, the tween. Here is the code I'm using currently to make this happen: // Hockey Player Slide var tween = TweenMax.staggerFromTo(".hockey-boy", 1, {left: -600, opacity: 0}, {left: 800, opacity: 1, ease: Linear.ease}, .15); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#hockey-player", triggerHook: 0, duration: 2000, }) .setTween(tween) .setPin("#hockey-player") .addIndicators({ name: "Hockey Player", }) .addTo(controller); http://empowerplay.webflow.io/ I greatly appreciate anyone shedding some light on this for me! Take care!
  2. gareth
    I have a text animation that shows one word at a time. Is there a way I can fire a function at the end of each staggerTo (i.e each paragraph?) This is what I have: tl.staggerTo(mySplitText.words, speed, {display:'block',repeat:1,yoyo:true}, speed*2,endOf) function endOf() { console.log ('end of paragraph') }
  3. pbod
    I'm having trouble trying to solve why my TimelineMax does not want to reverse when scrolling up. The timeline appears to autoplay and stop. Any advice? Thank you in advance. <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>A New Formula for Growth Marketing || G=mc2</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link href="https://fonts.googleapis.com/css?family=Raleway:100,400|Roboto:100,700" rel="stylesheet"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="trigger"></div> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div id="intro" class="header-container fs"> <div class="wrapper"> <section class="section-intro"> <h1 class="green">Heading 01</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> <p class=""> <a href="#slide01" class="button">Find out how</a> </p> </section> </div> </div> <nav> <ul> <li><a href="#intro"><span class="nav-dot"></span><span class="nav-label">Intro</span></a></li> <li><a href="#slide01"><span class="nav-dot"></span><span class="nav-label">Connected</span></a></li> <li><a href="#slide02"><span class="nav-dot"></span><span class="nav-label">Don't drop</span></a></li> <li><a href="#slide03"><span class="nav-dot"></span><span class="nav-label">New Formula</span></a></li> </ul> </nav> <div class="main-container"> <article id="slide01" class="slide fs"> <div class="wrapper"> <section class="section-left"> <h1 class="green">Heading 02</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> </section> <section class="section-right"> <div id="animate1"> <svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 250"> <g id="group_01" class="cls-1"> <g class="rect_01"> <rect class="rec_blue" x="157.5" y="119.5" width="50" height="10" transform="translate(307 -57.5) rotate(90)"/> <rect class="rec_green" x="142.5" y="119.5" width="50" height="10" transform="translate(292 -42.5) rotate(90)"/> </g> </g> <g id="group_02" class="cls-3"> <g class="rect_02"> <rect class="rec_blue" x="150" y="62.5" width="50" height="10"/> <rect class="rec_green" x="150" y="77.5" width="50" height="10"/> </g> <g class="rect_02"> <rect class="rec_blue" x="100" y="112.5" width="50" height="10"/> <rect class="rec_green" x="100" y="127.5" width="50" height="10"/> </g> <g class="rect_02"> <rect class="rec_blue" x="200" y="112.5" width="50" height="10"/> <rect class="rec_green" x="200" y="127.5" width="50" height="10"/> </g> <g class="rect_02"> <rect class="rec_blue" x="150" y="162.5" width="50" height="10"/> <rect class="rec_green" x="150" y="177.5" width="50" height="10"/> </g> </g> <g id="group_03"> <g class="rect_03"> <rect class="rec_blue" x="107.5" y="69.5" width="50" height="10" transform="translate(207 -57.5) rotate(90)"/> <rect class="rec_green" x="92.5" y="69.5" width="50" height="10" transform="translate(192 -42.5) rotate(90)"/> </g> <g class="rect_03"> <rect class="rec_blue" x="207.5" y="69.5" width="50" height="10" transform="translate(307 -157.5) rotate(90)"/> <rect class="rec_green" x="192.5" y="69.5" width="50" height="10" transform="translate(292 -142.5) rotate(90)"/> </g> <g class="rect_03"> <rect class="rec_blue" x="107.5" y="169.5" width="50" height="10" transform="translate(307 42.5) rotate(90)"/> <rect class="rec_green" x="92.5" y="169.5" width="50" height="10" transform="translate(292 57.5) rotate(90)"/> </g> <g class="rect_03"> <rect class="rec_blue" x="207.5" y="169.5" width="50" height="10" transform="translate(407 -57.5) rotate(90)"/> <rect class="rec_green" x="192.5" y="169.5" width="50" height="10" transform="translate(392 -42.5) rotate(90)"/> </g> </g> <g id="group_04"> <g class="rect_04"> <rect class="rec_blue" x="157.5" y="19.5" width="50" height="10" transform="translate(207 -157.5) rotate(90)"/> <rect class="rec_green" x="142.5" y="19.5" width="50" height="10" transform="translate(192 -142.5) rotate(90)"/> </g> <g class="rect_04"> <rect class="rec_blue" x="57.5" y="119.5" width="50" height="10" transform="translate(207 42.5) rotate(90)"/> <rect class="rec_green" x="42.5" y="119.5" width="50" height="10" transform="translate(192 57.5) rotate(90)"/> </g> <g class="rect_04"> <rect class="rec_blue" x="257.5" y="119.5" width="50" height="10" transform="translate(407 -157.5) rotate(90)"/> <rect class="rec_green" x="242.5" y="119.5" width="50" height="10" transform="translate(392 -142.5) rotate(90)"/> </g> <g class="rect_04"> <rect class="rec_blue" x="157.5" y="219.5" width="50" height="10" transform="translate(407 42.5) rotate(90)"/> <rect class="rec_green" x="142.5" y="219.5" width="50" height="10" transform="translate(392 57.5) rotate(90)"/> </g> </g> <g id="group_05" class="cls-6"> <g class="rect_05"> <rect class="rec_blue" x="100" y="12.5" width="50" height="10"/> <rect class="rec_green" x="100" y="27.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="200" y="12.5" width="50" height="10"/> <rect class="rec_green" x="200" y="27.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="50" y="62.5" width="50" height="10"/> <rect class="rec_green" x="50" y="77.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="250" y="62.5" width="50" height="10"/> <rect class="rec_green" x="250" y="77.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="50" y="162.5" width="50" height="10"/> <rect class="rec_green" x="50" y="177.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="250" y="162.5" width="50" height="10"/> <rect class="rec_green" x="250" y="177.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="100" y="212.5" width="50" height="10"/> <rect class="rec_green" x="100" y="227.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="200" y="212.5" width="50" height="10"/> <rect class="rec_green" x="200" y="227.5" width="50" height="10"/> </g> </g> <g id="group_06"> <g class="rect_06"> <rect class="rec_blue" x="57.5" y="19.5" width="50" height="10" transform="translate(107 -57.5) rotate(90)"/> <rect class="rec_green" x="42.5" y="19.5" width="50" height="10" transform="translate(92 -42.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="257.5" y="19.5" width="50" height="10" transform="translate(307 -257.5) rotate(90)"/> <rect class="rec_green" x="242.5" y="19.5" width="50" height="10" transform="translate(292 -242.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="7.5" y="69.5" width="50" height="10" transform="translate(107 42.5) rotate(90)"/> <rect class="rec_green" x="-7.5" y="69.5" width="50" height="10" transform="translate(92 57.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="307.5" y="69.5" width="50" height="10" transform="translate(407 -257.5) rotate(90)"/> <rect class="rec_green" x="292.5" y="69.5" width="50" height="10" transform="translate(392 -242.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="7.5" y="169.5" width="50" height="10" transform="translate(207 142.5) rotate(90)"/> <rect class="rec_green" x="-7.5" y="169.5" width="50" height="10" transform="translate(192 157.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="307.5" y="169.5" width="50" height="10" transform="translate(507 -157.5) rotate(90)"/> <rect class="rec_green" x="292.5" y="169.5" width="50" height="10" transform="translate(492 -142.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="57.5" y="219.5" width="50" height="10" transform="translate(307 142.5) rotate(90)"/> <rect class="rec_green" x="42.5" y="219.5" width="50" height="10" transform="translate(292 157.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="257.5" y="219.5" width="50" height="10" transform="translate(507 -57.5) rotate(90)"/> <rect class="rec_green" x="242.5" y="219.5" width="50" height="10" transform="translate(492 -42.5) rotate(90)"/> </g> </g> <g id="group_07" class="cls-8"> <g class="rect_07"> <rect class="rec_blue" y="12.5" width="50" height="10"/> <rect class="rec_green" y="27.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" x="300" y="12.5" width="50" height="10"/> <rect class="rec_green" x="300" y="27.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" y="112.5" width="50" height="10"/> <rect class="rec_green" y="127.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" x="300" y="112.5" width="50" height="10"/> <rect class="rec_green" x="300" y="127.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" y="212.5" width="50" height="10"/> <rect class="rec_green" y="227.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" x="300" y="212.5" width="50" height="10"/> <rect class="rec_green" x="300" y="227.5" width="50" height="10"/> </g> </g> </svg> </div> </section> </div> <!-- .wrapper --> </article> <article id="slide02" class="slide fs"> <div class="wrapper"> <section class="section-left"> <header> <h1 class="green">Heading 03</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> </section> </div> <!-- .wrapper --> </article> <article id="slide03" class="slide is-light fs"> <div class="wrapper"> <section class="section-left"> <header> <h1 class="green">Heading 04</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> <a href="#" class="button">Watch our video</a> </section> </div> <!-- .wrapper --> </article> </div> <!-- #main-container --> <div class="footer-container"> <footer> <h3> 2017 &copy; The Company, All rights reserved.</h3> </footer> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> <script src="js/main.js"></script> </body> </html> .clear:before, .clear:after { content: ' '; display: table; } .clear { *zoom: 1; } .clear:after { clear: both; } /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 400; } dfn { font-style: italic; } h1 { font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif; font-weight: 100; font-size: 2.5em; margin: .67em 0; } h2 { font-family: 'Raleway', Helvetica, Helvetica Neue, Arial, sans-serif; font-size: 1.2em; font-weight: 400; } p { font-family:'Raleway', Helvetica, Helvetica Neue, Arial, sans-serif; line-height: 1.5; font-size: 1.2em; font-weight: 100; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } input[type=search] { -webkit-appearance: textfield; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: 700; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */ html { color: #222; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ===== Initializr Styles ================================================== Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template ========================================================================== */ body { } .wrapper { width: 80%; margin: 0; } /* Make the body 100% of the browser viewport height */ html, body { height: 100%; margin: 0; } .green { color: #79BC6F; } .blue { color: #37A6DE } .dark-blue { color: #1F1645; } /* ========================================================================== Author's custom styles ========================================================================== */ /* =Header */ .header-container { text-align: center; color: #ffffff; background: #1F1645; } .header-container .wrapper { padding-top: 120px; z-index: 2; } .rec_blue{ fill:#35a8e0; } .rec_green{ fill:#79bc6f; } #animation-01{ position: absolute; } .cls-3 { opacity: 0.9; } .cls-4 { opacity: 0.8; } .cls-5 { opacity: 0.7; } .cls-6 { opacity: 0.5; } .cls-7 { opacity: 0.3; } .cls-8 { opacity: 0.1; } /* =Navigation */ nav { display: none; position: fixed; right: 30px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: right; z-index: 100; } nav a { display: block; line-height: 25px; position: relative; padding-right: 20px; color: #ffffff; text-decoration: none; } nav a:hover .nav-label { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } nav .nav-dot { display: block; width: 10px; height: 10px; position: absolute; right: 0; top: 50%; background-color: rgba(255, 255, 255, 0.5); border-radius: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } nav .nav-label { display: block; opacity: 0.5; visibility: hidden; -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); -webkit-transition: all 0.2s cubic-bezier(.17, .67, .83, .67); transition: all 0.2s cubic-bezier(.17, .67, .83, .67); } nav.is-dark a { color: #1F1645; } nav.is-dark .nav-dot { background-color: #1F1645; } nav ul { margin: 0; padding: 0; } nav li { width: auto; list-style: none; } .scroll-hint { position: absolute; bottom: 30px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* =Main */ .fs { height: 100vh; } .slide { color: #ffffff; position: relative; } .slide .wrapper { padding-top: 120px; text-align: center; } .slide#slide01 { background: #1F1645; } .slide#slide02 { background: #1F1645; } .slide#slide03 { color: #212121; background: #632c2d; background: -webkit-gradient(left top, left bottom, color-stop(0%, #e6e9ed), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(top, #e6e9ed 0%, #ffffff 100%); background: linear-gradient(to bottom, #e6e9ed 0%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e9ed', endColorstr='#ffffff', GradientType=0 ); } .slide#slide03 .button { border-color: rgba(0, 0, 0, 0.7); color: #212121; } .slide#slide03 .button:hover { border-color: #212121; background-color: #212121; color: #ffffff; } .slide#slide04 { background-color: #be4c2c; } .button { text-decoration: none; color: #ffffff; border: 1px rgba(255, 255, 255, 0.7) solid; padding: 8px 15px; margin-top: 15px; display: inline-block; position: relative; } .button:hover { border-color: #ffffff; background-color: #ffffff; color: #000000; -webkit-transition: background-color 1s ease-out; -moz-transition: background-color 1s ease-out; -o-transition: background-color 1s ease-out; transition: background-color 1s ease-out; } /* =Footer */ .footer-container { text-align: right; background-color: #1F1645; padding: 0 10%; } .footer-container h3 { font-size: 0.8em; color: #37A6DE; margin: 0; padding: 20px 0; font-weight: 100; } .footer-container a { color: #FEFEFE; } /* =Simple animation up */ .no-touch .slideInUp { visibility: hidden; opacity: 0; -webkit-transition: all 0.7s ease-out; transition: all 0.7s ease-out; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } .no-touch .is-active .slideInUp { visibility: visible; opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* ========================================================================== Media Queries ========================================================================== */ @media only screen and (max-width: 768px) { .wrapper { width: 80%; margin: 0 10%; } .section-left { float: left; width: 100%; } .section-right { float: right; width: 100%; } } @media only screen and (min-width: 768px) { h1 { font-size: 2.5em } /* =Header */ .header-container .wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; padding: 0; } .section-left { float: left; width: 35%; margin-right: 5%; } .section-intro { text-align: left; width: 35%; margin-right: 5%; } .section-right { float: right; width: 50%; margin: 0 5%; } .slide .wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: left; } nav { display: block; } } /* ========================================================================== Helper classes ========================================================================== */ .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ========================================================================== Print styles ========================================================================== */ @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } $(function() { // Setup variables var ctrl = new ScrollMagic.Controller(); var timeline01 = new TimelineMax(); var $rect_01 = $(".rect_01"), $rect_02 = $(".rect_02"), $rect_03 = $(".rect_03"), $rect_04 = $(".rect_04"), $rect_05 = $(".rect_05"), $rect_06 = $(".rect_06"), $rect_07 = $(".rect_07"); // Animate equal sign and fade out timeline01 .to($rect_01, 1, {rotation:-90, transformOrigin: "middle center", ease:Power2.easeOut}) .to($rect_02, 0.5, {scale: 1.5, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_02, 0.3, {scale: .5, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_03, 0.5, {scale: 1.4, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_03, 0.3, {scale: 0.4, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_04, 0.5, {scale: 1.3, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_04, 0.3, {scale: 0.3, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_05, 0.5, {scale: 1.2, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_05, 0.3, {scale: 0.2, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_06, 0.5, {scale: 1.1, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_06, 0.3, {scale: 0.1, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_07, 0.5, {scale: 1.1, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_07, 0.3, {scale: 0.1, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) ; // Scene 01 var scene01 = new ScrollMagic.Scene({ duration: 800, offset: 50, reverse: true, triggerElement: "body", triggerHook: 0, }) .addIndicators() .setTween(timeline01) .addTo(ctrl); });
  4. CICStoke
    Hi I'm trying to work out why this code isn't working. I would like to scan the document to find every instance of and element with a class of bcg-parallax and then run the code below: if (window.matchMedia("(min-width: 767px)").matches) { var controller = new ScrollMagic.Controller(); $(".bcg-parallax").each(function(i, item){ var newIndex = i + 1; var itemRef = '.bcg-parallax:nth-of-type(' + newIndex + ')'; var parallaxTL = new TimelineMax(); parallaxTL.from(itemRef + '.bcg-parallax .content-parallax', 0.4 , {autoAlpha: 0, x:'+100px', ease:Power0.easeNone},0.4) .from(itemRef + ' .bcg', 1.8, {y:'-50%', ease:Power0.easeNone},0); new ScrollMagic.Scene({ triggerElement: item, triggerHook: 1, duration: '100%' }) .setTween(parallaxTL) .addIndicators() .addTo(controller) }); } I'm using the css rules plugin, but this code at this time is hiding the first instance of the .content-parallax and thats it. It is not firing any events at the point of scroll. Basically I want the animation to be relative to the elements position on the page. Any ideas, I'm really struggling. Thanks
  5. spartan89
    Hi everyone! I would like to create a quotes rotator with SplitText and Timeline Stagger which can be animated in lines or words or chars! I have already tried to create one and there is the Pen that I made below here but it is not really what I wanted to achieve!! I would very appreciate any kind of help. Thank you!
  6. Wowzaaa
    Hi So i have multiple dom elements that i animate along an svg path ... for now ... looping clockwise works ... it loops forever but if i call reverse() .... it acts like a rewind() ... if it repeated twice ... it will reverse only 2 times .. not forever var timeLine = new TimelineMax({ repeat: -1, paused: false, yoyo: true }); timeLine.add(TweenMax.to(arrPeople[i], totalTime, { bezier: { type: "cubic", autoRotate: true, values: points }, force3D: true, repeat: -1, yoyo: true, ease: Power0.easeNone, onUpdate: function() { if (this.target == arrPeople[0] && !initialized) { let children = timeLine.getChildren(); if (children[0].time() >= totalTime - totalTime / people.length / 2) { timeLine.paused(true); initialized = true; } } } }), (i + 1) * totalTime / people.length); this is the code i use to create the timeline and the tweens any sugestions? thanks
  7. raizo
    Hi there, I am integrating GSAP with fullpageJS. for some slides, i am using the same timeline for the elements to fade in when a user gets on a new slide. This is how i set my animation var workTitle = $(".title"); var workContent = $("p"); var content = [workTitle, workContent]; var tl2 = new TimelineLite({}); tl2.staggerTo( content, 0.2, { autoAlpha: 1, opacity: 1, ease: Power1.easeIn },0.2); for now the animation will run for all slides when the user gets to a slide. for example if the user gets on slide 1, the content fades in. but when I swipe to slide 2, the content is already in view because the animation was played for all slides. this is how all my slides (will) look like. <div id="slide2" class="slide"> <section class="content"> <h3 class="title">slide 2</h3> <p> content </p> </section> </div> I am using the callbacks provided by FullpageJS in combination with GSAP. I know $(this) refers to the specific element you want to target, but I can't seems to find a way to refer to $(this) in a timeline. Its working fine except the animation is triggered for all slides, which needs to be only for the loaded slide. see how i make use of the callback provided by fullpage with some gsap. afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { var workTitle = $(".title"); var workContent = $("p"); var content = [workTitle, workContent]; var loadedSlide = $(this); var tl2 = new TimelineLite({}); tl2.staggerTo( content, 0.2, { autoAlpha: 1, opacity: 1, ease: Power1.easeIn }, 0.2 ); if (index == 2 && slideIndex == 1) { tl2.play(); } if (index == 2 && slideIndex == 2) { tl2.play(); } } Can someone help me and put me on the right track please see my fiddle: https://jsfiddle.net/jqk753m7/5/
  8. ahappe01
    I am having an issue getting my animation to seamlessly repeat. It seems like there is a delay between repetitions, rather than smoothly repeating each iteration.
  9. icdindia
    Hi, I am aware my question is not complete but I need help to help you help me Do let me know what more I can provide to find a final solution. We have created an entire website using GreenSock animation. There is one master timeline. Other timelines only perform certain animations. We are using TweenMax along with eraser.js, howler.js, slick.js, splittext.js, jquery-ui.js. The issues is that the website keeps on crashing on mobile devices, including iPhone 6s plus. This is because website is alot RAM heavy and does not work well on any device which has less ram. It includes iPhones, iPads, most android smartphones. It works flawlessly on devices with good ram (OnePlus3). I have used all browsers on the phones on which the website crashed. It is impossible to find the issue as I do not get any error log on crash. I have reach the conclusion that the issue is RAM based on the observation that after restarting the phone the website works fine for a few minutes before crashing again. I have tried to debug it using chrome inspect element but have not been able to reach any conclusion. Following are the elements that I have looked at. - svg animation, I only have 1 single svg animation in the beginning of the website, - dom elements. The number of dom elements was too much because of splittext which is not resolved, - using x and y instead of left and top for better performance, - using scale in only one animation - using autoAlpha everywhere instead of opacity I kindly request you to provide me more details on how can I debug my website. Following is the link : www.icdlabs.in/final If you require any specific part of the code, I will post it here, please do let me know. Thanks in advance.
  10. ekfuhrmann
    In the attached codepen I have a timeline in which `blocks` stagger into the display. That all works fine and well, but I'd like to make it so that the `autoAlpha` property runs a bit quicker than the rest -- for instance 300ms rather than 600ms. Is there any way of achieving this type of interaction with certain properties within a stagger going quicker than the rest?
  11. Kasparas
    Hi, I'm spinning a three faced pyramid object using rotateY. I've set up a TimelineMax consisting of three tweens with labels correspoding to points where each face of the pyramid is fully in front of the user. When the pyramid is hovered on, I'd like to tween to the nearest label, such as to reveal the nearest "face" of the pyramid completely. On the codePen, I'm using the "currentLabel()" method which tweens the rotation to the "previous" label successfully. However, if a tween is past it's "midpoint", I'd like to tween to the next label, which is "closer" to the current position (it will take less rotation to reach it). Maybe there is some already established / most elegant way to retrieve the "absolutely nearest label" to current transform ? Hope this makes sense, thanks !
  12. mikefraser
    Hi, I'm not sure if this is related to the topic: https://greensock.com/forums/topic/15728-onstart-maximum-call-stack-size-exceeded-error/ I'm trying to build a fairly complex (I think?) multi-stage animation, and I've started getting the following error messages: TweenMax.min.js:16 Uncaught RangeError: Maximum call stack size exceeded at d.h.add.h.insert (TweenMax.min.js:16) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) TweenMax.min.js:1 Uncaught RangeError: Maximum call stack size exceeded at d.k.totalDuration (TweenMax.min.js:1) at d.q.duration (TweenMax.min.js:14) at d.q._remove (TweenMax.min.js:14) at d.h.add.h.insert (TweenMax.min.js:17) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) Presumably related, I can't get the latest stage I'm working on to begin. I guess as a newbie, I've a couple of questions for the more experienced Greensock users out there: Any idea what's going wrong here? Any thoughts on how I could be doing this better? I've cobbled together my current approach from forum answers / stackexchange etc, currently by using one main timeline and adding sub-timelines (via functions) at various label points. I don't need it to stop in as many places as I've added (thats mainly to help me approach it in sections), but I do need it to hold in the 'working' loop until restarted by controls elsewhere. Any help / thoughts greatly appreciated. Thanks!
  13. pixelbeat
    I successfully implemented a native slider from Framer to control the timeline, instead of using jQuery and the jQuery UI slider library. My main problem emerged when I realized that the timeline events [onComplete, onProgress...] were not trigger at all. Here is the prototype. Sadly, I don't know how to isolate the bug or recreate this outside of Framer, but essentially my code goes as follows. init = new TimelineMax({onComplete:updateSlider}) # hSection is an Framer layer init.from(hSection, .5, {opacity: 0, y:"+=200", ease:Power3.easeInOut}, 0) # footer.children is an Framer layer with elements within init.staggerFrom(footer.children, .5, {opacity: 0, y:"+=25", ease:Power3.easeInOut}, -.15) # Here is the slider component slider = new SliderComponent width: Screen.width / 2 height: 20 # Here is the slider event that I used to drag and affect the timeline progress. This works like a charm. slider.on "change:value", (event, ui)-> init.progress(ui.value ).pause() return # Here is the function that needs to be triggered the moment that timeline is completed. Nothing happens. updateSlider = () -> print init.progress() Can you help me out? CoffeeScript code
  14. Victor Work
    Hello GSAPers, I need a help, I'm trying to pause each Tween inside a Timeline where I control the scrolling with ScrollToPlugin. I need it to stop, so I can control it with the Prev / Next buttons. To toggle anchors
  15. kvnmcwebn
    Hi, I'm trying to stagger in a series of boxes with opacity. Maybe the cycle feature is an overkill for this but I'd like to learn how to use it. All of the tutorials I've found on the cycle feature seem a bit complicated. Is there an example of a simple staggerTo with cycle in a regular timeline anywhere? var tl = new TimelineMax(); tl.to(".circle", .5, {opacity:-1}) .staggerTo(".boxes", 1, { cycle:{ opacity:[-1, 1] ease: [Power4.easeInOut] } }, 0.05) .to ..... -thanks
  16. pauljohnknight
    Hi I have a site where I have some elements in my style sheet that are set to opacity: 0 and translateX(0), these then animate with a TimelineMax (called sectionThreeIn) '.to' tween and scale up to opacity: 1 and translateX(1) which is all fine. I want to turn these animations off on mobile, so i've done a simple if statement: if (window.innerWidth < 768) { sectionThreeIn = null; } Because the animations only fire once I'm not bothered about doing any window resize events for desktop window sizes. The above if statement prevents the animations from firing on screens below this size, which is great. AREA OF CONFUSION I went into my CSS to add some media queries that change the opacity and transform values both to 1 for screens below 768px now the animations are turned off for the smaller screen sizes, so the elements don't effectively render invisible on mobile/iPad. But even without me doing this the elements are rendering as visible when I refresh the page (and clear the cache) on smaller screen sizes. This is confusing the life out of me. When i turn the if statement off, the CSS behaves as you'd expect, when I turn it on the end state of the animation is being implemented on small screens, but without the animation happening. Ironically what is happening is the end result I'm after, but I don't understand how this can possibly happen? If you make a timeline null, does it render as a completed animation, but without the actual animation happening? Also two of the three elements are using the CSS rule plugin - so I could recreate the issue on codepen, but I don't how to load the Greensock plugins (apart from TweenMax) onto a codepen pen? At present the site is on a localhost setup. I'm very confused.
  17. Bona
    Hi am a newbie in web development only 2 months in and i got inspired when i saw the Nike sbdunk website so i wanted to create something similar, the problem is that when i switch between the different categories (ie. men, women, unisex) too quickly it breaks my code, pls help. Here is my javascript. and i just uploaded to a freewebhost to show this issue https://bucco-cooporations.000webhostapp.com // menBtn menBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (mens.css("right") > "0px" & womens.css("top") >= "0px") { var menTl = new TimelineMax(); menTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(womens, 0.6, {top:"0%"}, {top:"-150%", ease:Linear.easeIn}, 0.1) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } else if (mens.css("right") > "0px" & unisex.css("left") <= "0px") { var menTl = new TimelineMax(); menTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(unisex, 0.6, {left:"0%"}, {left:"380%", ease:Linear.easeNone}, 0.1) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } else if (mens.css("right") > "0px" & womens.css("top") < "0px" & unisex.css("left") > "0px") { var mensTl = new TimelineMax(); mensTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } }); // womenBtn womenBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (womens.css("top") < "0px" & mens.css("right") <= "0px") { var womenTl = new TimelineMax(); womenTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(mens, 0.6, {right:"0%"}, {right:"300%", ease:Linear.easeOut}, 0.1) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } else if (womens.css("top") < "0px" & unisex.css("left") <= "0px") { var womensTl = new TimelineMax(); womensTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(unisex, 0.6, {left:"0%"}, {left:"300%", ease:Linear.easeNone}, 0.1) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } else if (womens.css("top") < "0px" & mens.css("right") > "0px" & unisex.css("left") > "0px") { var womensTl = new TimelineMax(); womensTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } }); // unisexBtn unisexBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (unisex.css("left") > "0px" & mens.css("right") <= "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}) .fromTo(mens, 0.6, {right:"0%"}, {right:"380%", ease:Linear.easeOut}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } else if (unisex.css("left") > "0px" & womens.css("top") >= "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}) .fromTo(womens, 0.6, {top:"0%"}, {top:"-150%", ease:Linear.easeOut}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } else if (unisex.css("left") > "0px" & womens.css("top") < "0px" & mens.css("right") > "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } });
  18. Guest
    Hi all, This is my first topic and I hope I have done this correctly. The issue is that when I scroll through the site the transform: translate -33.3333% works perfectly, but when I click the nav.li (.section2) the transform:translate still uses the pin from #main and thinks it needs to do -33.3333% again. How can I set the transform:translate to x: 0 when I click the nav li. Unfortunately my Codepen does not replicate the issue. Any help is appreciated. Thanks in advance, Regards, Nick
  19. Victor Work
    Hello GSAPers, I need a very important help. I'd like to know the best way to make alternate transitions between Timelines. Example: I click on the Go Red button to run the red timeline, and when I click on the Go Yellow button it will reverse the current timeline and start the required timeline. Is there a way to do this only with one Timeline?
  20. noobneedshelp
    Hello everyone, I hope the GSAP pros here can help me at my rather simple problem thats driving my nuts since 3 hours (!). I have elements on a page that have to change color and scale. After this I want to reverse the animation. I need to do this for about 4 different Elements. So each element should animate like this: 1-2-3-3-2-1 and start once the other is finished with a slight delay maybe. I already tried with repeat: 1 and yoyo: true but then it repeats the animation like this: 1-2-3-3-2-1-1-2-3-3-2-1 which I don't want … At first I tried it in a timeline but am not sure if this is the appropriate thing to do for my kind of animation. var introTimeline = new TimelineMax(); introTimeline.append( TweenMax.to($(".Ele1"), 1.5, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); introTimeline.append( TweenMax.to($(".Ele2"), 1.5, {scale: 2, fill: "cyan", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); Can someone here help me? I would really really appreciate it! GSAP looks awesome but I'm quite confused right now …
  21. romain.gr
    Hi, I've recreated a quick codepen of the issue I have, there is a '.set($list, {display: 'none'})' on line 16, which is not triggering. I've been playing around one full day on that and I can't figure out what's wrong, I'm probably missing something. So to see the first and main issue: - Click on the 'Show List' button => the list is set to display block then an animation is showing the list items and the title is disappearing, until here all is fine. - Click on the 'Show Title' to re-show the title and hide the list (display:none). => the title is showing, the animation on list item is working, but the list isn't going from display:block to display:none. I've also tried clearProps: All (and a lot of other workarounds, in css and/or full javscript, like adding and removing class), it doesn't work either. The second issue: var showList = new TimelineMax({paused: true, onComplete: console.log('complete')}); As you can see the animation is paused at first then triggered later, but the console.log is firing on page load, why? As it set to onComplete it should logically console.log when the animation is finished. If someone could have a quick look at this, it would be great. Thanks
  22. iuscare
    Hello, I have a expanding searchbar by using TimelineMax. If you click on the icon, the categories should scale away and the searchbar should expand to 100% width. When click anywhere on the body element while the searchbar is opened, the timeline should play in reverse state. This already works as intended. My Problem is that the timeline reverse is being applied with every click on the body element, even if the searchbar is not expanded plus the timeline is being interrupted and being resetted when clicking on the body element while the timeline is being played. I tried to solve this issues to give the search container a .data value open true or false, but somehow it will not work as intended. This may not be an explicit greensock probleme but rather a javascript logic problem, but I'd be very grateful if anyone may help me out. Timeline Code: (function($) { var $irpsearch = $('#irp-newssearch-container'), $irpsearchinput = $('#irp-searchform-input'), $search_icon = $('.irp-news-search-icon'), $btn_container = $('.irp-filter-buttons'), $filter_btn = $('.filter-btn'), $search_seperator = $('.irp-search-seperator'), $body = $('body'); var openSearchAnimation = new TimelineMax({ paused: true }) openSearchAnimation .staggerTo($filter_btn, .5, {scale: 0.7 ,opacity: 0,ease: Back.easeInOut},-0.1) .set($btn_container,{'display': 'none'}) .to($search_seperator, .3, {opacity: 0, ease: Expo.easeOut}, '-=0.6') .to($search_icon, .5, {backgroundColor:"#ffffff", ease: Power0.easeNone}, '-=1.0') .to($irpsearch, 1.0, {width: '100%', ease: Power3.easeOut}, '-=0.1'); openSearch = function () { $irpsearch.data('open', true); openSearchAnimation.play(); $irpsearchinput.focus(); return false; }, closeSearch = function() { $irpsearch.data('open', false); openSearchAnimation.reverse(0); } $irpsearch.on('click', function(e) { e.stopPropagation(); if (!$irpsearch.data('open')) { openSearch(); /* Body Click */ $body.off('click').on('click', function(e) { closeSearch(); }); /* Escape Hide */ $( document ).on( 'keydown', function ( e ) { if ( e.keyCode === 27 ) closeSearch(); } }); } else { if ($irpsearchinput.val() === '') { closeSearch(); return false; } } }); })(jQuery) Codepen: codepen.io/anon/pen/YQqQWm All the best Pascal
  23. olivetum
    I'm quite new to the jQuery and GSAP and really need Your help . I'm having a problem in animating children div while parent element is hover using TweenMax/TimelineMax. I can animate css of children with jQuery like this: $('.div1').mouseenter(function () { $('.div2').css('font-size', '20px'); }); but since I want to build a really complex animation I would like to use TimelineMax to my code in place of "css('font-size', '20px');" but nothing seems to work. I've build a simple test.html to find a solution: <body> <div id="logo"> <p id="text">TEXT TO BE ANIMATED</p> </div> </body> and I've tried to animate my #text element with this code (obtaining only parent animation): $(document).ready(function () { var hoverEffect = $("#logo"); hoverEffect.hover(function() { TweenMax.to(this, .35, {borderLeft: "15px solid #00b89d"}) }, function() { TweenMax.to(this, .5, {borderLeft: "0px solid #00b89d"}) }); }); I've also tried jQuery .find() and .children() methods but failed... Thanks in advance for Your help
  24. icdindia
    Hi, First of all thank you for developing such an amazing lib and it has made our lives much simpler. We are developing a major website using greensock where all the animations are being handled by various timelines. it is a single page website so there is no page refresh. The top navigation helps navigating between timelines by tl.play(). These timelines also have a loop of flickering text set to repeat -1 The issue arrises when we load a new timeline and go back to the previous timeline. Then the loop starts running twice and the page crashes. I wish to kill all timelines on the document whenever a new timeline is loaded. Because there are like 20 chapters, it would be very very tedious to kill all animations on every click. I tried using TweenMax.killAll(); this abruptly kills all animations ( even if i have an animation playing ) and the next animation doesnt play. I tried using chap2.kill(); this works nicely but is not expandable. There are going to be 20 chapters which will make developer's life miserable. My code : chap1 = TimelineMax chap1.to(something) chap2 = TimelineMax chap2.to(something) // option 1 (not working) //click on chap1 in top nav TweenMax.killAll(); chap1.play(0); //click on chap2 in top nav TweenMax.killAll(); chap2.play(0); // option 2 (working but tedious) //click on chap1 in top nav chap2.kill(); chap1.play(0); //click on chap2 in top nav chap1.kill(); chap2.play(0); Can you please help me out over here. How to use killAll to enable a seamless display of animation. I was short on time so didnt make a codepen. If my query is not clear I will make a codepen n provide the details too. Thanks for your product. I hope it will keep on becoming better every day.
  25. pr1ntr
    I discovered today (unless im doing it wrong) that my paused tweens and timlines don't play when added to a timeline. They need to be manually unpaused. Is this a desired effect? Would you guys be open to implementing a switch? Thanks.
5
6
7
...
20
Page 6 of 20  
×
×
  • Create New...