Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

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

  • GreenSock Forums
    • 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 106 results

  1. GreenSock

    Beyond The Uniform

  2. 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.
  3. 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!
  4. 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
  5. Hi there! I'm very new here. Sorry if I ask dumb questions. I'm trying to create a simple single web page displaying an animation that works exactly like the blue paper (not the white one) animation featured on this website (which is by the way a very beautiful and creative site). But without the text, images only. I'm not trying to rip this website off, the concept is gonna be completely different. I noticed the creator of this website used Tweenlite but for the moment I'm too unexperienced to build it on my own. Anyone here has got a similar Codepen (or whatever) I could use and modify or some useful tricks for a newbie like me? Would be so great! Thank you so much in advance. Cheers from Belgium!
  6. 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
  7. Hi all, Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/ I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated. Thanks Jon
  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. 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!
  15. 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!
  16. 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?
  17. 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
  18. 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(); } });
  19. 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.
×