Jump to content
GreenSock

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

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

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. Hey guys. First post here. I'm a graphic design and front-end student out of Zealand, Denmark. We are only learning JQuery at my school, but I am a hard learner, so I am looking for other options. I am currently learning vanilla JS, and randomly found this amazing library. So far everything has been super awesome. I'm facing one issue though. I am animating the height of an image. I added an AddEventListener, as I want the animation to start at a specific point on my site. Basically what I want to do is to animate the photo when it reaches the destination of the position. I have
  2. I feel like I may be overthinking this... 😬 I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container. I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the sc
  3. This is a guest post from one of the best teachers of GSAP, Carl Schooff, also known as SnorklTV. If you're new to GSAP or just looking to learn about the GSAP 3 syntax, his video courses are second to none! I can't tell you how many hundred's of questions I've seen in the GreenSock forums about controlling GSAP animations on scroll. I'm so happy there is finally a genuine GreenSock tool to power the future of scroll-driven animations. Before I get into the specifics, it's worth a moment of time to honor those that got us here. A short history of Scroll-driven Animations Joh
  4. https://codesandbox.io/s/affectionate-cookies-9hccc?file=/src/App.js It does not work when scroll and works only once
  5. GreenSock

    ScrollTrigger

    Scroll-driven animations re-invented Animate anything on scroll DOM, CSS, SVG, WebGL, Canvas, whatever. Toggle playback state or scrub through animations Entering or leaving a ScrollTrigger area can make an animation play, pause, resume, reverse, restart, or complete...or you can make the scrollbar can act like a scrubber! Pin elements in place Make an element appear immune to scroll changes while the ScrollTrigger is active. This is surprisingly useful for
  6. how to make Scroll with text fill like link below I have done everything I think I can do and have not had a similar result even I hope for any help and at least an idea http://clapat.ro/themes/hervin-wordpress/
  7. Chronic

    Circular menu

    Hi, I've been trying to make a menu like this: https://maxilla.jp/ where the menu is a carousel and moves when you scroll, drag, or click. I'm guessing I have to use scrollmagic for the scrolling part, but I'm kind of lost. I just want to be able to scroll and the next item follows in sort of a circular path, like a carousel without arrows. I'm not expecting any of you to tell me the answer. I'd be more than happy if you just simply point me in the right direction. Thank you all for your time!
  8. Hello, I hope you can help me with this. I am trying to create a custom hook for creating an image parallax using intersectionObserver API. Seems work partially but when I scroll I get this error: backend.js:6 Invalid property y set to 47.666666666666664 Missing plugin? gsap.registerPlugin() My goal: using Y or backgroundPosition from/to everytime the element is visible. import React, { useEffect } from 'react'; import { gsap } from 'gsap/all'; function useImageParallax(imagesParentSelector) {
  9. Hi! I'm using the plugin SplitTextJs to create an animation reveal to my titles (you can how I'm doing it in the Codepen). I'm doing this animation on many elements and I want to trigger the animation when the element is in the viewport. With some research I saw that I need to do some loop and a lot of people are doing that with scrollmagic. I was wondering if it's possible to do it without scroll magic. The reason is that I have already many script loaded and I want to have the less script possible to load especially if I'm using it for little things. Thank you
  10. Hello I have to do a airplane that fly vertically left and right whenever the user scrolled, I already did it with Scroll magic and I can't figure how to do it right, i know the problem is on the path it must take full height of my container but i don't know how to do it do you have any idea guys I've been stacked for 2 days Thank you
  11. Hi everyone. Can someone help me with animation like this ? https://miro.medium.com/max/800/1*T7YtwbVBbuhdO5g-FA5zKQ.gif The animation as usually start with delay and t looks wierd :( May be someone can give me advice or example. Thanks.
  12. Hey yall, I'm new to greensock, and I love the library and this forum. This forum has especially been helpful as I practice and learn gsap technique. I have a new project that is supposed to animate a background SVG, and it has the following requirements: The background diagonals are supposed to slowly move downwards, kind of like a parallax effect. It's a big SVG with lines running across it When the user scrolls, it supposed to speed up the parallax progress a little bit with some easing, but continues to progress down the timeline When the user scrolls u
  13. 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,
  14. 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 'sca
  15. 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.
  16. 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!
  17. 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 c
  18. 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
  19. 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
  20. 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.
  21. 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,
  22. 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?
  23. 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?
  24. 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
  25. 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
×