Jump to content
Search Community

dev_jigar

Members

  • Posts

    11

  • Joined

  • Last visited

 Content Type 

Posts posted by dev_jigar

    Moving content and image on scroll

    in GSAP

    Posted

    Hello All,

     

    I want something like this website. https://cuberto.com/

    The section i want from above website is 

    1 - is - moving text which is marquee type and moving when we scroll and slow when we hover

    2- is - featured project section on scroll project changes with image and content

     

    Is anybody having something examples or something similar ?

    Please let me know. It would be very helpful.

     

    Thanks,

    JC

    Marquee Text Slider with ScrollTrigger

    in GSAP

    Posted

    On 7/6/2020 at 6:45 AM, redfawx said:

    This topic can be closed. I've fixed what I was aiming to accomplish with simply changing Timeline to TweenLite. Thank you again all for your help. If someone is trying to find a solution this was the code that ended up working for me (still need to dry it out):

      

    
<template>
  <div class="w-full overflow-x-hidden">
    <div id="no01" ref="marquee" class="wrapper flex font-hel">
      <div class="boxes my-auto">
        <div class="box text-2xl md:text-6xl text-white">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-yellow-500">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-white">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-yellow-500">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-white">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-yellow-500">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-white">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-yellow-500">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-white">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-yellow-500">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-white">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-yellow-500">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-white">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-yellow-500">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-white">{{ copy }}</div>
        <div class="box text-2xl md:text-6xl text-yellow-500">{{ copy }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  gsap,
  TweenLite
  // TimelineLite
} from 'gsap/dist/gsap'

import NuxtSSRScreenSize from 'nuxt-ssr-screen-size'

export default {
  mixins: [NuxtSSRScreenSize.NuxtSSRScreenSizeMixin],
  props: {
    copy: {
      type: String,
      required: true
    },
    marqueeText: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      master: null,
      boxWidth: null,
      totalWidth: null,
      no01: null,
      dirFromLeft: null,
      dirFromRight: null,
      mod: null,
      animation: null
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.boxWidth = 250
      this.totalWidth = this.boxWidth * 16 //  * n of boxes
      this.no01 = this.$refs.marquee.querySelectorAll('.box')
      this.dirFromLeft = '+=' + this.totalWidth
      this.dirFromRight = '-=' + this.totalWidth

      this.mod = gsap.utils.wrap(0, this.totalWidth)

      this.setMarquee(this.no01, 15, this.dirFromLeft)
      const thisObj = this
      thisObj.animateFromLeft()
    })
  },
  methods: {
    setMarquee(which, time, direction) {
      const thisObj = this
      gsap.set(which, {
        x(i) {
          return i * thisObj.boxWidth
        }
      })
    },
    marquee(which, time, direction) {
      const thisObj = this

      thisObj.animation = TweenLite.to(which, {
        x: direction,
        modifiers: {
          x: (x) => thisObj.mod(parseFloat(x)) + 'px'
        },
        duration: time,
        ease: 'none',
        repeat: -1
      })
    },
    animateFromRight() {
      const thisObj = this
      thisObj.marquee(thisObj.no01, 15, thisObj.dirFromRight)
    },
    animateFromLeft() {
      const thisObj = this
      thisObj.marquee(thisObj.no01, 15, thisObj.dirFromLeft)
    }
  }
}
</script>
<style scoped>
.wrapper {
  width: 150%;
  height: 150px;
  background: grey;
  overflow: hidden;
}
.wrapper .box {
  position: absolute;
  width: 250px;
  height: 50px;
  /* font-size: 40px; */
  font-weight: 600;
  line-height: 50px;
  text-align: center;
}
.wrapper .boxes {
  position: relative;
  left: -250px;
}
</style>

     

    Hi @redfawx

     

    I want the same way as you mentioned in your first comment.

    But i need that in JS not in es6 environment.

     

    Can you please help me?

     

    Thanks

    JC

     

×
×
  • Create New...