Search the Community

Showing results for tags 'scrollmagic'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Categories

  • HTML5 / JS
    • Public
    • "Simply Green" Package
    • "Shockingly Green" Package
    • "Business Green" Package
  • Flash
    • AS3
    • AS2

Found 98 results

  1. Hi ! It's possible to achieve the scroll effect in this page (this page use scrollmagic and greensock.) http://www.locus-solus.it/en/pouffe_gae_aulenti The elements continue their animation after scroll is stopped. I dont know if I could achieve this with greensock tween settings or the scrollmagic one Thanks!
  2. Scrollmagic

    Hi Guys, I want to add a scroll magic effect on the website I'm currently working on. First I wanted to get it working in a codepen test. I followed some tutorials and tried to figure out some codepens. What I want to achieve is to let the square move when the element with id: move is triggered. At the moment the tweening starts immediately when the page is loaded. I'm struggling with getting the code work and I don't see what I'm missing. I hope someone can help me. Thanks in advance! Ilse
  3. Hi @DD77! I'm moving our chat back to the public forum as I am no longer messing aroung with the countdown. ( For anybody who were not around during the time, I'm refering to the bellow thread. Yes, I did make too much of a fuss for no particular reason... Soz) So, to the matter at hand. My understanding of what @DD77 needs help with is to have a horizontal scroll that triggers some animation as you move it along. His sample pen is the following: In our private conversation I offered the bellow as a starting point: No animation, just the CSS to have a bunch of horizontal sections. I have no comercial experience with ScrollMagic, I'm going to be reading the docs and making it up as I go along, so, if anyone has anything to add, please do so. Here are ScrollMagic examples: http://scrollmagic.io/examples/index.html and the documentation: http://scrollmagic.io/docs/index.html as guides. What we'll do first is as simple as a test we can do.
  4. ScrollTo Plugin and ScrollMagic

    Good day lads. I have a pressing question and I am hoping this is the right place to ask. Can anyone direct me on the general approach towards achieving scrolling like these on the following sites - http://fantasy.co/ and https://www.ramotion.com/. Generally what I want to know is how to listen for the onScroll event and scroll to an anchor or an element on the page such as can be seen from those sites. I've tried searching online but all the tutorials seem to be doing this on click of an anchor link whereas I want to achieve this on scroll. Anyone able to help?
  5. I need a click event on (section-2) which will do the following: - Page body changes background colour (adding class="darkerblue").- The main element (clickable) to move across x:500, scale:1.5. - if I click the main element it will revert all. -If I scrollback to previous scene(section-1) it will revert all. From line 93, where I started making the scene for section-2
  6. Not sure why the image on section-2 doesn't center on scroll. I tried everything so far. It should appear from section-1, so with the offset, starts animating . What I'm I missing here? on leave should go back at the start on the left. new ScrollMagic.Scene({triggerElement: "#section-2",offset: -350, duration: $('#section-2').outerWidth(true)}) .on("enter", function(){ $("#anchor2").addClass('selected'); $("#section-2").addClass('animated fadeInUp'); var tl = new TimelineLite(); tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } ); function getMidX( obj ){ return ( $(obj).parent().width()/2 ) - $(obj).width()/2; } }) .on("leave", function(){ $("#anchor2").removeClass('selected'); $("#section-2").removeClass('animated fadeInUp'); tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } ); function getMidX( obj ){ return ( $(obj).parent().width()/2 ) - $(obj).width()/2; } }) .addTo(controller);
  7. Not sure I'm doing the right thing here but I need the navigation to scroll horizontally. Also links should be active when the page scrolls... What am I missing here?
  8. How to animate the elements one by one?

    Hello, I have logo and content on my website. I am able to animate the logo and content on page load. I am using the scroll magic plug-in because when the user scrolls the mouse wheel than animate the elements. Now the issue is, My animation is working together, I mean I have to animate first content then I have to animate the logo. After complete, the animation logo than again I have to animate the content. I tried some code but not working. This is my task I have to animate the header content from bottom to top 70% linearly. then I have to animate logo 50% from top to bottom, and then cross. then again I have to animate the content bottom to top which is the last content. Please help me out with this issue.
  9. Hello, I have one circle and I am using scroll magic. I have to scroll the circle with 360 degrees and after that circle will hide. I mean one it will cross the screen of the desktop that It will hide and then below content will display on the screen using the mouse wheel. Now my code is not working properly. I mean when I am scrolling the mouse wheel and circle start and end in the center of the pc and content also scrolling. I need when circle crosses the desktop screen than content should scroll. Would you help me out in this?
  10. Scrollmagic and 2 tweens

    Hi, I am trying to achieve an effect that when I scroll the page I move two different lists of words, and I can see just two word per time (one of each list). After I see the 6 words, I unpin the lists and go to another section. and I know I'm doing it quite wrong, so I'm asking for some help or tips. Thank you.
  11. ScrollMagic GSAP SVG Mask Bug

    I am using ScrollMagic with the GSAP Plugin. I am trying to reveal a line based on an animated mask that should sync to the scroll. This demo works on Desktop but not on iOS: https://codepen.io/paul-siteway/full/aVGwEw/ I am not sure if this is an ios, svg, scrollmagic or gsap bug. Any help is appreciated!
  12. New Website Launched

    I didn't know if there was a showcase thread but I wanted to share my latest website with you all. https://zadesigns.com make sure to check it out on both the Phone and Browser because it's been designed to be friendly to phones. The site was created with Angular 4.4.6 / UI-Router / Material Design / GSAP 15 / ScrollMagic / SplitText Thanks to Jack and everyone at GSAP for making really great products! Been using GSAP since the good old days of Flash. Also congrats on the new Animation UI dev tool! I haven't had a chance to use it yet but I wish I saw it before I made my site! Thanks! Zuriel
  13. scrollmagic + greensock starts immediatley

    Hi forum! How are you today? I'm working on an animation that I want to trigger and sync to the scrollbar, but start in the middle of the page, and return the scrolling the page when finished. This is what I thought about doing: [content] [ANIMATION PLACEHOLDER which is height: 100vh;] [empty section] [ANIMATION which is floating and set to display: none; and height: 100vh;] I put a scroll scene trigger at the start of the ANIMATION PLACEHOLDER section. the animation duration is set by javascript. the duration will change the ANIMATION PLACEHOLDER height to get the correct duration injected into that scroll section: pre-animation: set height of ANIMATION PLACEHOLDER to animation duration (should be 2 screens or 200vh) animation: make ANIMATION appear (I don't want the animation to scroll off screen) make ANIMATION PLACEHOLDER stick to top of it's section (when animation is set to reverse, this will make the placeholder appear in the correct place) move two boxes in the ANIMATION synced to the scroll (for now) make ANIMATION PLACEHOLDER stick to bottom (so it will appear as if you just continued to scroll) make ANIMATION disappear This seems to work for the end of the animation, but the animation (at least the set) starts as soon as the page loads. maybe it has something to do with immediateRender? I want the floating ANIMATION to appear only when the scroll trigger reaches the top of the screen. The animation itself does trigger at the right moment (only when the trigger reaches the top), but the set part happens immediatley thanks for the help Neil
  14. Sequencing Tweens with Scrollmagic

    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!
  15. Make character look the other way on reverse

    Hi everybody, I'll start by saying that Greensock is amazing and I love it Also, great forum! Already found a few solutions by going through some of the threads here. I'm trying to make a character walk on a path when the page scroll reach certain points. After a few tries, I went forward with the following solution: 1. animate the character on each path using top left with percentage so that the horizontal roads can be responsive 2. this way, I can create the entire animation from the start, and just forward the animation to the correct position (or even backwards) 3. potentially, I can make the animation slower of faster to make the character walk faster (this will effect both the sprite animation and the walking) Now, I'm at a point were the basics work. the character follows your scroll (it feels as if he's trying to catch up with you). Later, I'll add more points across the path to make him walk shorter distances Now, i'm having problems with 3 more things I want to accomplish: 1. make him go faster for bigger distances (if you scroll super fast, he should speed up the animation up to a certain max) 2. try and make the tweenTo function start at the same speed as the current speed (but still speed up and slow down overhaul if that's possible) 3. change the direction of the sprite. currently, on reverse(), the character just walks backwards. I want a way to change the sprite's background position to a "up walk" and "left walk" to make it better. Can this be done only by creating two different animations? I would really appreciate any help trying to fix those problems. I'm kind of stuck at this point, reading all the docs I can find
  16. 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); });
  17. Hi, In our magento project, we need to add scroll magic animations. we used the following code to include libraries: requirejs-config.js: var config = { paths: { "TweenMax" : "js/TweenMax.min", "scrollMagic" : "js/ScrollMagic", "animation.gsap" : "js/plugins/animation.gsap" }, deps: [ ], "shim": { /*"wc_owlCorousel" : { "deps" : ['jquery'] }*/ "TweenMax" : { exports: 'TweenMax', }, "scrollMagic" : { exports: 'scrollMagic', }, "animation.gsap" : { exports: 'animation.gsap', }, } }; And in library files placed in the respective folders. Then, we added this code in our html page: requirejs(['jquery','scrollMagic'], function ($,ScrollMagic) { ............... ................. But when running we get this error: (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js. We tried some alternatives such as : requirejs(['jquery','scrollMagic', 'TweenMax'], function ($,ScrollMagic, TweenMax) { .......................... } But nothing is woked. Please let me know how to include scroll magic and green sock in magento (or in require js)
  18. Text tag glitches

    Hi all, I'm having some issues when I animate text using gsap and scrollmagic. The screenshot shows where I'm in the middle of a tween that has a duration. Any thoughts? Thanks;
  19. Hello, I have 2 CodePen Examples containing a simple tween and scroll. The first example works fine. The Second Example is really similar (the tween is slightly extended), but for some reason the console returns Cannot set property 'ScrollMagic' of undefined. I've been over this a hundred times and can't see where I'm going wrong ... can you help
  20. Hello everyone, need help here, 1. I don't know why but my codepen works but when I implemented on the website does not work. Any reasons why? 2. On the other hand, how I make these transitions more secure? Because when you scroll fast the animations has his glitches some times. codepen: I don't know why it's doesn't work on the website. these is the website code. The same!!! Just change the scroll triggers // Scroll Interactions //Init Controller let controller = new ScrollMagic.Controller(); // Ball Scene let ball = $('.ball'); let xCenter = window.innerWidth/2; let yCenter = window.innerHeight/2; let ballTl0 = new TimelineLite(); let ballTl = new TimelineLite(); let ballT2 = new TimelineLite(); let ballT3 = new TimelineLite(); let ballScene0 = new ScrollMagic.Scene({ triggerElement: '.hero-heading', }) .setTween(ballTl0) .addIndicators() .addTo(controller); let ballScene1 = new ScrollMagic.Scene({ triggerElement: '#feature1', }) .setTween(ballTl) .addIndicators() .addTo(controller); let ballScene2 = new ScrollMagic.Scene({ triggerElement: '#feature2', }) .setTween(ballT2) .addIndicators() .addTo(controller); let ballScene3 = new ScrollMagic.Scene({ triggerElement: '#feature3', }) .setTween(ballT3) .addIndicators() .addTo(controller); // Change index function changeIndex() { console.log('change index!!!'); } ballTl0 .to(ball, .8, {css:{ x: '-12%', borderRadius: '50%'}, ease: Elastic.easeOut.config(.5, 0.4)}) ballTl .to(ball, .8, {css:{ x: '10%', borderRadius: 0}, ease: Elastic.easeOut.config(.5, 0.4)}) ; ballT2 .to(ball, .5, {css:{ x: '-50%', borderRadius: '50%', scale: .5}, ease: Elastic.easeOut.config(.5, 0.4)}) ; ballT3 .to(ball, .5, {css:{ x: '-90%', borderRadius: 0, scale: 1}, ease: Elastic.easeOut.config(.5, 0.4)}) ; website: http://muuaaa.webflow.io/home-newer (webflow for fast prototyping and great for design focus. I include de js I want).
  21. stylize scrollbar

    Hey guys, First of all, let me appologize for my bad english because i'm french. I have a problem with scrollmagic. Usually, i put th code below to customize my scrollbar with CSS. But when it's with scrollmagic, it has no effect. ::-webkit-scrollbar-track { background-color: #fff; } ::-webkit-scrollbar { width: 8px; background-color: #000; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #000; border-radius: 8px; border: 2px solid #fff; } Does a solution exist for this issue or i'm blocked with the default weird scrollbar ? you can see the result in this url : http://test.jdo-univers.eu
  22. gsap.Animation/ScrollMagic + Vue- CLI

    Hello GSAP'ers I'm using Vue-Cli / Webpack template and I already managed to import ScrollMagic, but when running TimelineMax with setTween I get this error: "(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js" My webpack.base.config.js is configured like this: var $ = require("jquery"); var ScrollMagic = require("scrollmagic"); var ScrollGsap = require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'); var gsap = require("gsap"); module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { "TweenLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'), "TweenMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'), "TimelineLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'), "TimelineMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'), "ScrollMagic": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'), "animation.gsap": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'), "debug.addIndicators": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js') } And my Component.vue is like this: <script> import { TweenMax, TimelineMax } from 'gsap' import $ from 'jquery' import ScrollMagic from 'scrollmagic' import gsap from 'scrollmagic' export default { mounted () { TweenMax.from('#red', 5, {width: 0}); const tlVueGsap = new TimelineMax() .from('#blue', 5, {width: 0}) .to('#blue', 5, {x: 400}) const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: "#red" }) .setTween(tlVueGsap) .addTo(controller); } //Close Mounted } //Close Export Defautl </script> ScrollMagic is working, just the gsap.animation plugin that is not being imported Any idea how to solve it? Link of Github Project: https://github.com/Efetivos/vue_init/blob/master/src/components/GsapTest.vue Thanks Folk
  23. Controlling the speed of Tween on scroll

    I have the following: var secOne = new ScrollMagic.Scene({ triggerElement: '.section-a', triggerHook: 0, duration: $(window).height() - 100 }) .setTween( new TimelineMax() .add( TweenMax.fromTo(['.section-a .svg-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, force3D: false, ease:Power4.easeNone }) ) .add( TweenMax.fromTo(['.section-a .text-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, ease:Power4.easeNone } ) ) ) .setPin('.section-a') .addTo(controller); Which is fine apart from the fact that the animations have to come in smooth no matter how fast the user scrolling up or down. In this case if the user scrolls to fast then the animated parts suddenly show up. Is there a way to slow down the tween so that no matter if the user scrolling really fast they'll always get a smooth in out response from the animated tween? As you can see I have tried 'ease:Power4.easeNone' and that works to a degree but there's really nothing that stops it from zooming in on a fast scroll movement. Also I know scroll jacking is the work of Beelzebub but I'm being forced into this against better reasoning. Thanks
  24. Hey guys, So I have a centered element, when I create a scene for that element and go to another page (same window, scroll a little) and then coming back, the element is not centered anymore. It is moved a little to the left, even though my tween has only up and down movement. I tried to replicate on codepen, doesn't work. The original site: https://alacreme.000webhostapp.com/alczzz3/index.html On the first page you see "pasiunea gustului..." that goes down when you scroll. This p is centered. Now scroll down, where you see a facebook link, click it, scroll down on it. Now go back to page and scroll up untill you see "pasiunea gustului" again it is not centered anymore, refresh to see. Sometimes it does it, sometimes it doesn't. The code for the centering of p: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); The code for the tween: tween_slogan_first = createTweenMoveVerticalEaseNone(slogan_first, 1, 0, $(slogan_last).parent().height(), 0); function createTweenMoveVerticalEaseNone(element, tween_time, opacity_var, distance) { return TweenMax.to(element, tween_time, { opacity: opacity_var, y : distance, ease: Linear.easeNone }); } The code for the scene scene_slogan_first = createScene($('#acasa'), 'onCenter', $(window).height()/2, $(window).height()/2, true, tween_slogan_first, false); function createScene($trigger, trigger_hook_var, offset_var, duration_var, reverse_var, tween, tween_changes) { return new ScrollMagic.Scene({ triggerElement: $trigger, triggerHook: trigger_hook_var, offset: offset_var, duration: duration_var, reverse: reverse_var }) .setTween(tween) // pins the element for the the scene's duration // .addTo(controller) // assign the scene to the controller .tweenChanges(tween_changes); }
  25. 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