Jump to content
GreenSock

dev_jigar

Members
  • Posts

    11
  • Joined

  • Last visited

Posts posted by dev_jigar

  1. 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

  2. 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

     

×