Search the Community
Showing results for tags 'scroll'.
-
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/
-
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!
-
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) { useEffect(() => { const appWrapper = document.querySelector('.app--layout'); const elements = document.querySelectorAll(imagesParentSelector); const scrollHandler = () => { let options = { root: null, }; // parallax effect let observer = new IntersectionObserver(function(entries) { entries.forEach((entry) => { const offset = appWrapper.scrollTop / 3; gsap.to(entry, { y: offset }); }); }, options); for (let elm of elements) { observer.observe(elm); } }; appWrapper.addEventListener('scroll', scrollHandler, { capture: false, passive: true }); return () => { appWrapper.removeEventListener('scroll', scrollHandler, { capture: false, passive: true }); }; }, [gsap]); } export default useImageParallax;
-
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
-
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
-
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.
-
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 upwards, its supposed to reverse the tween timeline I've been able to achieve a few things, but the things i'm still having trouble with are Reversing the scroll direction with the scroll event is upwards. Also right now, I have the progress of the scroll animation tied to the height percent of the `window.innerHeight`. but after testing, i don't think this is a good idea. Because the window height percent is not compatible with the progress of the timeline. So i should find another way to progress the timeline.. but i'm not sure what. For reference I used this post to get started, which as been really helpful: If anyone has advice from doing something similar to this, please please let me know. My knowledge is not advanced enough to debug. Thank you Thank you!! PS please excuse the messy code, i'm just trying to get this thing working. Best, Gabriel -
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,
-
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.
-
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.
-
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!
-
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!
-
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
-
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
-
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.
-
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.
-
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?
-
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?
-
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
-
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
-
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!
-
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
-
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?
-
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(); } });
-
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.
