Search the Community

Showing results for tags 'scroll'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 90 results

  1. I need to make working this functionality, basically I need to trigger the GSAP function when the element is in viewport. I'm adding the class and is going all fine, but then I need the function to work on the elements and animate them. I don't intend to use Scrollmagic
  2. smallio

    Update anchors on scroll

    Hi guys, I've always found animating anchor links with CSS very laborious, however up until now it's been a bit too complex for me to do it with GSAP. I've decided to take a shot at it & have so far I've spliced together an example with fullpage.js & one of @OSUblake pens. At the moment the nav dots work on click, however I'm stuck updating them via scroll. My idea was to use the if statements but so far no cigar. Any ideas how this would be done in tandem? Cheers, Smallio
  3. Greetings, I'm fairly new to GSAP and I would like to know how to implement a snap method so that when the translate of the wrapper is between 0 and 20% it goes automatically to 20%, like a classic snap to a point. PS. a lot of the code has been forked from Sahil89 Thanks in advance for the help. - Gabriel
  4. I'm trying to test out a scroll hijacking method I saw on http://www.adidas.com/us/climazone. On that page, they have a fixed position container with everything in it absolutely positioned and on page scroll they translate3d the elements up -Y scroll position which I can do but they key ingredient they add is easing to that scroll tracking. So as you scroll the elements follow "recreating the scroll effect" but upon release slowly ease into their final place which is the end Y scroll position. I've found this StackOverflow question, https://stackoverflow.com/questions/25056769/how-to-add-easing-to-parallax-movement, where it talks about javascript easing mixed with parallax, however, I can't seem to figure out how to apply it to what I'm doing or what I want my end result to be. I also found this JSFiddle where it adds easing based on mouse movement that I thought might be helpful to use pieces from for easing, http://jsfiddle.net/74mnpgs7/4/. I've added a link to my current CodePen example with my starting point, any help achieving/deconstructing what Adidas Climazone is doing to add easing to their scrollY transforms would be eternally grateful! Another demo I did on JSFiddle is here: https://jsfiddle.net/416ne38h/5/ Bonus if I can use GSAP for this!
  5. senza12

    Issue with TimeLine Progress

    Hi all, First of all, thank you for the lovely community and the support given. I have spend many hours going over older topics to figure things out in the past and its been a massive help. I am working on a new project where I want to trigger animations based on a scroll position. I know this has been done many times before and after doing some research I decided that I do not want to use a plugin (like Scrollmagic for example) for performance reasons. On one of the posts here I found out that there is a newish API within JavaScript that can handle my needs called IntersectionObserver, I am using a library to make sure that I have a wide browser support for this technology (https://github.com/russellgoldenberg/scrollama). If you would look at my Codepen, you will notice that I am trying to trigger an animation on the second element based on the scroll position. I am using .progress(); to do so, where I call in a value between 0-1 based on the scroll position (taken from the Scrollama library). When you scroll down, you will notice that the box on the left moves position (as intended). The problem I am having though, is when you scroll up it does not move back. I am assuming that when using the .progress(); function, the timeline will be animated to whatever position is being fed into this? Unfortunately I can not get this to work. I have been searching on the internet for hours now and I just can't seem to find the issue. Hopefully this explains my problem clear enough, thank you in advance for any help!
  6. SalvoDee

    Animate multilayer images

    I want to animate the splitting of a product image when the user scrolls to the section. i.e. When a user scrolls down and enters the product image section, I want to trigger the animation of revealing the different layers/composition of the product. Like it is done here (scroll down to the second section after landing page): https://simbasleep.com/ Any suggestions?
  7. joej

    Parallax on scroll

    Can someone please tell me how this site accomplished this type of parallax effect? Seems so easy but I find zero tutorials on it. It's a mystery! https://art4globalgoals.com/en/exhibition
  8. Maximilianwte

    Play One Step of Timeline on Mouse Scroll

    Hey, I am desperately searching for a way to play one step of my timeline when the a mouse scroll gets started. All methods that I have found trigger the events multiple times on scroll and gsap gets really confused. Is there a convient way to build something like that with greensock? What I want to build is a animation triggered webapp like these: https://theshift.tokyo/ http://www.contiducco.it/index.php?route=common/home My Code at the moment: $(window).bind("mousewheel DOMMouseScroll", function(event) { var docTimeline = new TimelineLite({ paused: true }); docTimeline.add(TweenLite.to(".lightLogo", 1, { y: "200%" })); docTimeline.add(TweenLite.to(".text", 1, { x: "0%" })); // Events when scrolled down. if ( event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0 ) { docTimeline.play(); } else { docTimeline.reverse(); } });
  9. Hi there, can anyone help me please? I have a page with a div that has a fixed position. I'd like to animate the element inside the div with GSAP when you scroll through the sections on the page with ScrollMagic. I am able to make the object move when you enter a section and when you scroll back it is reversed. How can I make it so that the object moves from it's current position to a new position when the user scrolls into the next section? I'd like the element to keep changing position when you enter a different section. I've seen many examples of GSAP and Scrollmagic in action but I'm struggling to find any examples that animate a single element through. A simple Codepen example is attached. Thanks.
  10. adamhopkins

    Using GSAP for page scrolling effects

    Hello, I have been looking into getting a smooth scrolling effect using GSAP. After looking into Scroll Magic, I realised that what I want to achieve can be done using just using a GSAP timeline. I found something on Codepen which had a similar look to what I was after. I have tweaked this myself but have come to point where I need a bit of help/advice. Basically, my webpage will consist of one page made up of 3 full width sections, each one being 100vh/% in height (so 3 separate panels). The first panel will contain some information and a background image. The second panel will also contain some content but will have a background video applied instead of an image The third will be the same as the first, only with a different background image being used. What I'm trying to achieve to have the panels transition into one another smoothly as you scroll. A simple opacity swap and scale tweak so that as you scroll down the page, panel 1 fades into panel 2 and then panel 2 fades into panel 3. I am having some difficulty with my timeline I think. Currently the top 2 panels fade into each other quite well but I'm having difficulty adding the 3rd panel into the mix. If anyone can offer any advice/help on this then it'd be much appreciated. My codepen URL is https://codepen.io/anon/pen/ZobLYL
  11. benoit

    stop the scroll

    Hi, I try to stop the scroll during a tween. It's not work like I expect. A text is hidden under a block (height:400px), when the scroll is at 400, this text is fading in 1s. I need a 1s disable scroll. Then scroll is working. I try this : https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily but it's look like the browser relaunch the velocity after enable the scroll.
  12. Kingsley88

    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?
  13. Hector18

    Vertical mousemove scroller

    Hi guys. I made a pen with vertical scroll. What I want to achieve is a smooth scroll and and animation to start form top and end at bottom of the screen like in this example: http://ultra.studio/ Thanks in advance for your help!
  14. VincentdeVreede

    iOS 10 & ScrollToPlugin

    Hello all, I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem) Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false": TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut}); Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just open a page that is using GSAP on your iPhone en run code without autoKill:false. (Sometimes it will not autoKill it, but almost always). Hope that I have made someone happy with the same problem Greets! Vincent
  15. jnhltmn

    scroll hijack / smooth scroll

    Is there, or can there be an GSAP-alternative for the smooth scroll hijack like https://github.com/baptistebriel/smooth-scrolling?
  16. Ilse

    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
  17. Tom von Mom

    controlling video with page scroll

    Hello, fellow GSAPpers! This is my first stab at GSAP (love it!) and I'm super-eager to get your input on whether I grasped some of the basics or just totally messed it up. What I wished to create was some scrolling magic where the user controls the position of a video using the scroll wheel . Very similar to what goes on at the top of apple.com/homepod (which also seem to use GSAPs Tween & Timeline. Please have a look and give any hints on how to make this even smoother and more compatible on all sorts of devices (iPhone seems to work pretty good though). One thing that bugs me is that this is 40 lines of code. Apple's example runs one for at least 400. What am I doing wrong? TOM
  18. thatkookooguy

    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
  19. Hi, The library is great. Loves to use it to create animations. I was using it will scrollMagic library. I wanted to know if there is any way I can detect if the animated element is scrolled out of the browser viewport when the user scrolls the page up so that the animation can be reset. Right now when it is scrolled down the animation is playing in the reverse direction. I just want the animated element stays in its final state as long as it is in the screen and when the user scrolls up and the element goes out of the viewport I want to reset it so it can play again when it is scrolled down. just like the title animation in http://carv.ai
  20. candiceysl

    Seeking for advice

    Hi, Any idea how to build this fancy thing using GSAP? http://pharrellwilliams.com/ They want this effect to be insert one of the section inside a one page website, the effect is user can scroll in any direction, drag to view more & also filter effect. Now i lacking idea where to start research the effect or any example to give me idea to start with this fancy stuff. or the keyword for research? Please advice anything, because i fully stuck and hopeless now Million Thanks.
  21. 9kW

    Draggable knob and scroll area

    Hi all, In the codepen example that is provided, the knob and the scroll-bar are linked, which is what I want to accomplish for my project. The content area is also draggable by mouse, which I want to strip out of the code, but I can't seem to make it work.. In summary: i want the knob to link to the scrollbar of my page.. that's it. (So if the knob is fully rotated, the scrollbar is at the bottom of the page etc.). I would appreciate any help. Thanks in advance!
  22. SA5

    Scroll follow animation

    Hey there, I came across this site from awwwards, quite like the animation. wondering if this can be done in gsap library. http://www.lespetitesculottees.com/#!en/product/la-blue-monday The way i was thinking to achieve this is to animate each of the element based on scroll position, but this will result a blank space at the bottom of the page, as the whole element shift up to its y position. Most element in example site will remain it position. Any help to point me to the right direction would be appreciated. TweenMax.to ("#text1", 1.2, {ease: Power1.easeInOut, y: -parseInt($(window).scrollTop()/1.4)} ); TweenMax.to ("#text2", 1.4, {ease: Power1.easeInOut, y: -parseInt($(window).scrollTop()/1.4)} ); .... .... Many thanks
  23. drewbit

    continuous repeating scroll

    I'm trying to repeatedly scroll items in a list. I have a container with 3 images all with float: left set on them. When the first element is animated, the second one stays in place, instead of moving. Relevant code here, complete example at: http://jsbin.com/tivupa/2/edit?html,output .slideshow { display: block; width:7300px; position: absolute; top: 200px; left: 0px; } .slideshow img { float:left;margin:0;padding:0; } <container> <div class="slideshow"> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> </div> </container> TweenMax.to($(".slideshow img:first"), 10, {x:"-=2400px", ease:Linear.easeNone, onComplete: function(){ $(".slideshow img:first").insertAfter(".slideshow img:last");}}); Any ideas how I can get a continuous scrolling effect?
  24. Dark19

    Fill svg line and show elements

    Hello! I have some issue with show elements. I fill svg line with help property stroke: function pathPrepare ($el) { var lineLength = $el[0].getTotalLength(); $el.css("stroke-dasharray", lineLength); $el.css("stroke-dashoffset", lineLength); } But I don`t know how can show element when fill before it (elements are hidden). They are conected only alike scene and they have absolut position. Maybe GSAP or Scrollmagic have some functions for decide this problem? Or maybe give me some hints. My code: // Init ScrollMagic var ctrl = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 0, tweenChanges: true, duration: ScreenHeight } }); // Create scene $("section").each(function(){ new ScrollMagic.Scene({ triggerElement: this }) .setPin(this) .addTo(ctrl); }); var processLine = '#process-line'; // prepare SVG pathPrepare($(processLine)); var s4Tween = new TimelineMax(); s4Tween.to($(processLine), 1, {strokeDashoffset: 0, ease:Linear.easeNone}) .add(TweenMax.to(processLine, 0, {stroke: "#3495d1", ease:Linear.easeNone}), 0); // Create scene var scene4 = new ScrollMagic.Scene({ triggerElement: "#section3" }) .setTween(s4Tween) .addIndicators({name: "1 (duration: svg)"}) .addTo(ctrl);
  25. lynette

    scroll text up

    Hi, Wondered if anyone can help? I have text and i would like it to scroll from bottom to top, going off the banner view and then leaving it on the last text for like 2.5 seconds. How would I do this?? <div class="banner"> <div id="copyScroll"> <p> Lorem Ipsum is simply dummy text? </p> <p> Lorem Ipsum is? </p> <p> Lorem Ipsum is simply dummy text of ? </p> <p> Lorem Ipsum is simply dummy ? </p> <p> Lorem Ipsum is simply dummy text of the printing? </p> </div> </div> <script> var tl = new TimelineLite(); function anim() { copyScroll = document.querySelector('.copyScroll'); p = document.querySelector('p'); tl .to(copyScroll, 1.5, {y: '-400px'}); } </script>