Jump to content
GreenSock

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

kresogalic

ShockinglyGreen
  • Posts

    4
  • Joined

  • Last visited

Everything posted by kresogalic

  1. Hi guys, is it possible to create page transition like this one https://tympanus.net/Development/PageFlipLayout/ I really want to create something like that, but I don't know where should I start? Thanks in advance
  2. I am trying to create slow smooth scroll on website in React and it doesn't work, this is what I tried so far. constructor(props) { super(props); this.state = { scrollTime: 0.5, // Speed scrollDistance: 100, // Scroll easing distance ticking: false, }; } componentDidMount() { window.addEventListener('mousewheel', this.mousewheelHandler, false); window.addEventListener('DOMMouseScroll', this.mousewheelHandler, false); } mousewheelHandler = (event) => { event.preventDefault(); let { scrollDistance, scrollTime, ticking } = this.state; // // SLOW SCROLL var slowScroll = () => { var delta = event.wheelDelta / 120 || -event.detail / 3; var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; var finalScroll = scrollTop - parseInt(delta * scrollDistance); TweenLite.to(window, scrollTime, { scrollTo: { y: finalScroll, autoKill: true }, ease: Power1.easeOut, autoKill: true, overwrite: 5 }); ticking = false; }; if (!ticking) { requestAnimationFrame(slowScroll); ticking = true; } };
  3. @Noturnoo thank you this works, but I am integrating this in React, and what happens if I have structure like this: <nav className="links"> <NavLink exact to="/">Home</NavLink> <NavLink to="/services">Services</NavLink> <NavLink to="/work">Work</NavLink> <NavLink to="/blog">Blog</NavLink> </nav>
  4. Hi guys, I am trying to replicate menu link hover effect from this site https://www.niccolomiranda.com/ Can you help me how can I do that?
×