Jump to content
Search Community

medmedmed75

Members

  • Posts

    15

  • Joined

  • Last visited

 Content Type 

Posts posted by medmedmed75

    Parallax without modify height

    in GSAP

    Posted

    Hey everyone, 

    I was inspired by that website parallax effect.

    When i'm using parallax, i usually do a transform: translate3d(0, (val)px, 0) and height: 120% on the image in a container that have an overflow: hidden for masking. 

     

    On the website I mention above, the translation has been executed on the container, himself wrap in an other div that have a mask. The image is never taller than the translated container div. 

     

    Any idea to achieve that kind of results?

    Multiple triggers in a timeline with ScrollTrigger

    in GSAP

    Posted

    Hey everyone!

     

    I was wondering if it possible to : 

    • first, create a Timeline
    • then, on each tween, apply a ScrollTrigger with a different trigger for each element. 

     

    The idea is to create a timeline where I can create animation for each element .hero, .infos, .other and the triggers would be these classes. 

      

    <section>
  <div class="hero">
    <h1>Title</h1>
  </div>
  <div class="infos">
    <div>
      <p>blablabla</p>
    </div>
  </div>
  <div class="other">
    <div>
      <h2>Subtitle</h2>
    </div>
  </div>
</section>

     

    Maybe I can do something like this but it creates multiple ScrollTrigger reference.  

    const tweensConfig = [
  {
    type: "to",
    classname: ".hero",
    x: 100,
  },
  {
    type: "from",
    classname: ".infos",
    opacity: 1,
  },
]

const createAnimation = () => itemsClass.map(({ type, classname, ...rest }) =>
	gsap[type](classname, { scrollTrigger: { trigger: classname }, ...rest }))

     

     

    Sorry in advance if I did a duplicated post and I just read the common mistakes usage for ScrollTrigger but I can't find a solution. 

     

    Many thanks for your help :) 

    Force3d doesn't work

    in GSAP

    Posted

    If I understand well, the transform3d is here just to perform the tween via the GPU (the thing I want btw lol)? So the motion is still performing by the transform() and not the transform3d?

     

    And, last question, what about scale3d? Can I use it just using force3D? 

     

    Many thanks for your clarification, it helps a lot! 🙏

    Force3d doesn't work

    in GSAP

    Posted

    @GreenSock thanks for your response!

     

    Maybe I'm confusing with the translate(...) and translate3d(...) I see in Chrome Devtool. 

    During the tween, I see translate() (with values changing) and translate3d(0, 0, 0) with no values changing.

     

    I mean, I thought I would only see translate3d performs

     

    does that mean it's working? 

    Force3d doesn't work

    in GSAP

    Posted

    Hey everyone! 

     

    I have some trouble using force3D

    Here is an example:  

    const tl = gsap.timeline()
gsap.config({ force3D: true })
tl
  .set('div', { yPercent: 100 })
  .to('div', {
    yPercent: 0,
  	duration: 1,
    delay: 1
  })

     

    Maybe i'm using it wrong?

     

    (I don't create a codepen because the code is very simple)

     

    Many thanks for your help :)

    [ScrollToPlugin] React - Failed to execute 'scrollto' on 'window'

    in GSAP

    Posted

    Hello everyone,

     

    I'm currently working on a React project and I need to use ScrollToPlugin. 

     

    Here is how I import the plugin 

      

    import gsap from 'gsap'
import ScrollToPlugin from 'gsap/ScrollToPlugin'

    And then, to prevent some troubles in production, added  

    const plugins = [ScrollToPlugin]

    Then I have a scroll ref  

      const scrollRef = useRef(null)

    And finally this is how I used the scrollto function  

     const scrollTest = el => {
    gsap.to(window, {duration: 1, scrollTo: el });
  }

<button className={s.btn__scroll} onClick={() => [setScrolled(true), scrollTest(scrollRef)]}>Go Down</button>

     

     

    After many researches, I thought it was due to an import issue. So I've tried to insert cdn script directly in the public html... doesn't work. 

    Any ideas? :)

     

    SOLUTION

    As @elegantseagulls said below, you just have to register your ScrollToPlugin as follow :  

    gsap.registerPlugin(ScrollToPlugin)

     

    Many thanks 

     

     

     

    • Like 2

    Animate React component on unmount

    in GSAP

    Posted

    Hello everyone! 

     

    I've got some troubles to make my transition between 3 differents components. The logic is pretty simple : I just want to go from opacity 0 to 1 when component is being mounted (easy with hooks / stateless components, or componentDidMount / react class) and to go from opacity 1 to 0 when the component is being umounted. Neither the useEffect nor the componentWillUnmount are working for this transition. I admit that's a pretty simple transition but impossible to do when component is unmount. 

     

    Here is the function fired when Homepage, About Us or Corporate are clicked : 

      

    	toggleBetweenAllPages = () => {
		const page = this.props.toggle.page
		if (page === "homepage") {
			return <Homepage />
		}  else if (page === "corporate") {
			return <Contact />
		} else if (page === "about us") {
			return <Infos />
		}
	}

    Hope this is clear and thanks in advance for your help! :) 

×
×
  • Create New...