Jump to content
Search Community

Search the Community

Showing results for tags 'scrollmagic'.

  • 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 182 results

  1. 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);
  2. 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.
  3. 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?
  4. 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.
  5. 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!
  6. 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
  7. 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
  8. 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!
  9. 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
  10. 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); });
  11. 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
  12. 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)
  13. 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;
  14. 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
  15. 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).
  16. 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
  17. 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); }
  18. Hello everyone. I know that there is topic about angular but I have checked every topics without having an answer to my problem. My problem is simple. How to implemenent properly ScrollMagic and gsap to an Angular-Cli (2/4) app. I have installed: npm install gsap npm install scrollmagic I have added to my .angular-cli.json: "scripts": [ "../node_modules/gsap/src/uncompressed/TweenMax.js", "../node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js", "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js", "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js", ], In my component, I have: import { TweenMax } from 'gsap'; import * as ScrollMagic from 'ScrollMagic'; import "ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"; import 'ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js'; And I use in my script.: TweenMax.to(calculator, 1.5, { scale: 2 }) ... new ScrollMagic.Scene(...) .setTween(TweenMax.to(calculator, 1, { scale: 2 })) And i get the following error: Cannot read property 'to' of undefined If I remove the path of TweenMax in angular-cli.json, and I remove the import of animation.gsap.min.js, the following action works. TweenMax.to(calculator, 1.5, { scale: 2 }) but the next action: .setTween(TweenMax.to(calculator, 1, { scale: 2 })) doesnt work and I have this error: (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js And if I just remove the import {TweenMax} from 'gsap' in my component, I get the following error: ./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TweenMax' in 'D:\...\...\node_modules\ScrollMagic\scrollmagic\minified\plugins' @ ./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js 3:53-103 @ ./src/app/cv/cv.component.ts @ ./src/app/app.module.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts So If someone know how to install it properly, that would be great. Thank you.
  19. Hi guys - To create a tween that animates as you scroll what do you need exactly? I am referencing both tweenmax and scrollmagic and I also added the gsap animation plugin. No matter what I do this doesn't seem to want to work. Please help!
  20. Hello! I've been looking into creating an effect that I see a lot of modern websites using. Im not sure if im meant to be using scrollmagic or not but it seems like quite a good library to plugin to gsap. Here's an example of the effect that I am trying to create http://lamoulade.com/#!/home The website above displays items on the webpage while you scroll. I am looking at creating something similar. I thought the best place to start was to create a bezier curve, and have it only animate along the curve while I scroll - the only problem is, I have NO idea where to start. Should I be looking at ScrollMagic's 'pinning' of objects and have them set to containers? Not sure. Thanks in advance to anyone that posts any information on this topic. Cheers!
  21. Hey there, i am trying to reverse/change the color of a logo based on the section its in. I got it working so far but i am kinda wondering if its the right and most performant approach (i kinda guess it isn't) I basically wont to use it on different subpages and the number of sections is variable. Thanks a lot, much appreciated const controllerMobile = new ScrollMagic.Controller(); const innerStart = new TimelineLite(); const innerEnd = new TimelineLite(); const outerStart = new TimelineLite(); const outerEnd = new TimelineLite(); innerStart.to('.js-logo__inner', 0.1, { fill: 'pink' }); innerEnd.to('.js-logo__inner', 0.1, { fill: 'orange' }); outerStart.to('.js-logo__outer', 0.1, { fill: 'orange' }); outerEnd.to('.js-logo__outer', 0.1, { fill: 'pink' }); const changeLogoStartTrigger = document.querySelectorAll('.js-change-logo--start'); const changeLogoEndTrigger = document.querySelectorAll('.js-change-logo--end'); function changeLogoStart() { changeLogoStartTrigger.forEach((triggerStart) => { const sceneChangeLogoStart = new ScrollMagic.Scene({ triggerElement: triggerStart, reverse: true, triggerHook: 0.065, offset: 0, }) .setTween(innerStart) .setTween(outerStart) .addIndicators() .addTo(controllerMobile); }); }; function changeLogoEnd() { changeLogoEndTrigger.forEach((triggerEnd) => { const sceneChangeLogoEnd = new ScrollMagic.Scene({ triggerElement: triggerEnd, reverse: true, triggerHook: 0.015, offset: 0, }) .setTween(innerEnd) .setTween(outerEnd) .addIndicators() .addTo(controllerMobile); }); }; changeLogoStart(); changeLogoEnd();
  22. Edit: See below for the most legible version of the code! Hello, I'm trying to play a tween whenever the user stops scrolling. Eventually I'll play from 0-1 on scrolling down, and from 1-0 on scrolling up. Currently I'm experiencing some unexpected behavior however. See the code below. The `ScrollMagic.Scene` tells the component whether the user is scrolling up or down, and `scrollStop()` is calling the arrow callback whenever the user stops scrolling. Contrary to my tween config, the scene ignores `paused: true` and moves `.yellowHollowCircle` 400px immediately on pageload (much faster than the 2 seconds it should be taking). Scrolling up and down yields the console.logs seen in the attached screenshot, and no further movement. Do you understand why `.play(0)` is not playing the tween from the beginning like I expect? const reverb = function(object, amount = 10, time = randomBetween(2, 3), timeMax){ let tweenName = object + 'ReverbTween' + this._reactInternalInstance._debugID, sceneName = object + 'ReverbScene' + this._reactInternalInstance._debugID; if (!this.controller) this.controller = new ScrollMagic.Controller(); if (timeMax) time = randomBetween(time, timeMax); this[tweenName] = TweenMax.to(object, time, { transform: `+=translateY(${amount}px)`, ease: Power3.easeOut, paused: true }); this[sceneName] = new ScrollMagic.Scene({ offset: 0, duration: 1 }) .triggerHook(1) .on('update', e => { let { scrollPos } = e, { lastScrollPos } = this.state; let scrolling = lastScrollPos > scrollPos ? 'up' : 'down'; this.setState({ lastScrollPos: scrollPos, scrolling }); }) .setTween(this[tweenName]) .addTo(this.controller); } // just calls callback once user stops scrolling const scrollStop = function ( callback ) { if ( !callback || Object.prototype.toString.call( callback ) !== '[object Function]' ) return; var isScrolling; window.addEventListener('scroll', function ( event ) { window.clearTimeout( isScrolling ); isScrolling = setTimeout(function() { callback(); }, 66); }, false); }; class SuperFunTime extends React.Component { constructor(props) { super(props); this.reverb = globals.reverb.bind(this); } componentDidMount(){ this.reverb('.yellowHollowCircle', 400, 2); globals.scrollStop(() => { console.log('stopped scrolling ' + this.state.scrolling, this['.yellowHollowCircle' + 'ReverbTween' + this._reactInternalInstance._debugID].progress()); this['.yellowHollowCircle' + 'ReverbTween' + this._reactInternalInstance._debugID].play(0); }) } }
  23. Hello! I am currently trying to mimic the effect on this website: http://brightmedia.pl/ If you scroll down in my codepen you can see a similar effect with the line being drawn. I was wondering if anyone knew/has done this before and could provide me any additional information in: A. How do I keep the point of drawing in the middle of the window B. How do I go about adding extra paths to the animation? Do I get seperate SVGs to trigger on scroll? Thanks for any help in advance
  24. Hi, I am using scrollmagic to build a website where multiple panels overlap each other on scroll. Once you land on the 2nd panel, a separate timeline plays out, triggered by an onComplete function. When you scroll back up, I don't want the animation to replay, I just want it to scroll back up on the static last frame. But if you scroll all the way up, and then down, I would like for it to repeat. In my codepen, it only plays once, and I can't get it to replay the animation. What would be the best way to do this? Thank you, Jenny
  25. Hey Guys! I've recently discovered your awesome products and have been enjoying playing around with the examples. However, I've run into some trouble trying to implement it into my project haha. Yet confident this won't be a biggie for you guys. So , if it's not too much of a bother please take a look at the codepen attached to see what I mean. https://codepen.io/Raulito/pen/jmwXxp *Specifically, I keep getting the error 'cannot tween a null target' in the console , which stops all my other animations from running , when trying to use the CSSRulePlugin to target the :before pseudo element. *I've noticed that this error occurs and can be seen in the console both on codepen AND when doing local development without a server, but for some reason works when I'm developing it locally using XAMP. * Cheers, Raul.
×
×
  • Create New...