Jump to content
GreenSock

Search the Community

Showing results for tags 'scroll'.

  • 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

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

Categories

  • ScrollTrigger Demos

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

  1. Hello, I'm trying to update this @Shaun Gorneau Codepen. First of all I would appreciate some help moving the code from jQuery to plain JavaScript. I'm stucked On the other hand I'm experimenting with this pen trying working with a font-size relative to the window width (example: font-size: 8vw;). Obviously, on window resize it messes up all the programming because it changes the object width. Anyone has a better idea than refreshing the page on window resize with a classy: window.onresize = function(){ location.reload(); } Thanks in advance,
  2. Hello Everyone, I am brand new to animation. I am trying to achieve an affect where when a user scrolls, the image zooms in and fades into the next image. Please see this url as an example of what I am trying to achieve: https://ihatetomatoes.net/demos/zoom-into-image-page-scroll/ That particular demo uses skrollr.js which I started to use but then read that it was deprecated and did not work on a lot of mobile devices. I then started to try and find an alternative library and came across scrollmagic. I have started learning it but I cant seem to find any 'zoom' or 'scale' option for scrollmagic. I then turned to Greensock which has various zoom effects but I want things to zoom only when scrolled, so that brought me back to scrollmagic. I really am just getting so confused as to how I can achieve this effect. Please, if anyone can advise how I can get that 'zoom on scroll' effect when a user scrolls (using either Greensock or Scrollmagic) I'd be so grateful. Thank you.
  3. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Making a DOM element draggable isn't terribly difficult - there are jQuery plugins and even some native HTML5 capabilities in newer browsers. But generic dragging is kinda boring. What about smooth, natural momentum-based continuation after the user releases the mouse (or touch on mobile devices)? What about imposing bounds and edge resistance and silky-smooth redirection to certain landing values that you provide? Or flick/drag scrolling with bounce-back that doesn't look awkward? Or instead of dragging to change the position of an element, what if you want to spin it? Maybe you even want to track the momentum and let it come to rest naturally or rig it to glide to a stop at a certain value, Wheel-of-Fortune style? Yeah, that's a lot more complex. In fact, it can be a real drag to build (sorry, the pun was irresistible). Draggable makes it remarkably simple. More importantly, it delivers a very fluid user experience on both mobile devices and desktop browsers. Instead of explaining what makes Draggable so special, we built an interactive demo that showcases some of its talents. There are even code samples that update as you change the options. Go play around and have some fun. View Demo
  4. I'm fairly new to React and fresher with Greensock aminations. Want to achieve vertical scroll effect like https://plasticbcn.com but stuck in middle of transition. please guide or provide some code snippets that include react + gsap scroll animation.
  5. Hi, Please scroll down and then up, in CodePen Pin. When I start scrolling down, animation works perfectly. If I scroll up, animation works reverse but the box does not keep original size and position. How can I fix that? Thanks!
  6. Hi guys I saw this demo in the forum lately: https://codepen.io/PointC/pen/YRzRyM I have a draggable horizontal slider in my current project and I would like to make it also scrollable with snapping. Snapping already works. But I have no idea how to make it also scrollable because I am a newbie in JS. Thank you for any help! Best, Cédric
  7. 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
  8. Hi, I use the Draggable plugin locked on the y axis to manage scrolling in a section. I would like to retrieve the y position of the scrolled element to trigger an event when reaching the end of the scroll area. It's working as follow when the user drag but not when he use the mouse wheel for ex. Draggable.create(Pr, { type: 'scrollTop', ... onDrag: function(e) { type: 'scrollTop', this.update() console.log(this.y) } }) How can I get a unified way to retrieve the y position between the different events, drag, scroll, etc.
  9. Hello everyone at GSAP. Thanks for the great ongoing job. For the past day or two, I've been trying to implement GIaco's full page slider on my react website. This is the link to the original on codepen - What I am trying to do is achieve the exact same thing but with react. So far I have not been able to get anything to work especially because some of the line of code in the codepen example above don't make much sense to me when trying to implement them in react. This is what I have so far - import React, { Component } from 'react'; import { TweenMax, TimelineMax, ScrollToPlugin, CSSPlugin, Expo } from 'gsap/all'; import ReactPageScroller from "react-page-scroller"; import '../../styles/components/home.scss'; import Nav from '../nav/Nav'; const plugins = [ CSSPlugin ]; class Home extends Component { state = { slides: [], animating: true } constructor(props) { super(props); this.Go = this.Go.bind(this) } componentWillMount() { const slide = this.state.slides; const indx = slide.length - 1; const Anim = this.state.animating; for(var i = slide.length; i--;) { slide[i].anim = TweenMax.to(slide[i], 0.7, { yPercent: -100, paused: true }); } document.addEventListener("wheel", this.Go); } Go(e){ var SD=isNaN(e)?e.wheelDelta||-e.detail:e; if(SD>0 && indx>0 ){ if(!Anim){Anim=slide[indx].anim.play(); indx--;} }else if(SD<0 && indx<box.length-1){ if(!Anim||!Anim.isActive()){indx++; Anim=box[indx].anim.reverse();} }; if(isNaN(e))e.preventDefault(); }; render() { return ( <div className="home"> <Nav /> <div className="slide" ref={(slide) => { this.state.slides.push(slide) }}>1</div> <div className="slide" ref={(slide) => { this.state.slides.push(slide) }}>2</div> <div className="slide" ref={(slide) => { this.state.slides.push(slide) }}>3</div> </div> ); } } export default Home; Please, if anyone could spare the time in this busy festive period to help me out, I would be ecstatic. Thanks all and Merry Christmas.
  10. I'm creating a landing page and using GSAP to animate some text according the the user's scroll position. How can I keep the landing page in full view and only start scrolling down the page once the text animation has reached its end?
  11. Hello. thank you for your work. I'm using GSAP with React and ScrollMagic and having troubles with IOS scroll animations. other platforms have great productivity of animations. What am I doing wrong?
  12. 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
  13. 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
  14. 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!
  15. 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
  16. 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(); } });
  17. 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.
  18. 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
×