Bratua
Bratua's Achievements
Recent Badges
2
Reputation
-
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.
-
@Visual-Q That's ok. Any kind of help is always good.
-
@Visual-QThanks a lot. You've been of immense help. I think I can take it from here. Do you mind if I pick your brain every once in a while?
-
@Visual-Q Ok. Thank you. Any help you can offer tomorrow is greatly appreciated.
-
@Visual-Q Here is what I have so far. The problem is the regular scrolling section seems to be behind the animated sections. I tried playing with the z-indices but I'm not getting the desired effect.
-
@Visual-Q Thanks so much for the update. I've been working on reversing it myself for a while. I do however have one question, if I want this animation to only affect the first three slides but then every other content scrolls normally, how do you suggest I go about it? Just like in the example website.
-
How can I achieve this scroll animation on the hero sections on this website - https://www.sapientrazorfish.com/ using scrollmagic and GSAP or any plugin you can direct me towards.My main aim here is to achieve the overlapping section and snap effect. Looking at my codepen, I've achieved the overlapping effect but can't just seem to make them snap on scroll just like the website. Any help is appreciated.
-
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?
-
I've found the issue.
- 6 replies
-
- 1
-
-
- servers
- javascript
- (and 2 more)
-
@Sahil Sure. Here's the link to the live website - www.seimodei.com
-
Good day everyone. I have just completed my personal portfolio site which makes use of GSAP. However, it seems the animations are not playing and so the page remains blank. Everything works fine on my local server but when I uploaded my website to the dreamhost servers, the animations no longer work. There are no errors whatsoever on the console. I contacted the customer service and was told that in my error.log file it says the folder where all my GSAP.js files are located cannot be found. But looking at my panel, all files were uploaded successfully. Ok, in order to be sure it was not just the dreamhost servers, I decided to try uploading the site to github servers and still the same thing. The site and all files uploaded successfuly but the javascript files are not running or located. I don't know exactly. And after looking at the console and the network in the google developer tools, there is no single error, it shows all files were uploaded successfully as there is no error. What may be causing this issue? I'm lost.
-
@Jonathan Would you mind if I shared the link to the github project so you can take a look for yourself? The project has many scripts that I can't seem to load in codepen. It will be of immense help.
-
@Jonathan Thank you for taking the time but my code is extremely large at this point with many GSAP files. I wouldn't know how to go about recreating the issue in codepen.
-
All the animations done using tweenMax don't play in the pages. not just the transition.
-
I just discovered that the issue is that the page transition isn't playing. When removed the page loads as normal. Now I have to figure out how to make it play in firefox. Any ideas? it's an animated <div> by the way. Not an svg.