Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

3,010 profile views

vlbn's Achievements

  1. NO no.. don't get me wrong. what i meant to say is that i am not that expert and maybe someone smarter than me could come up with something different. i like the idea of solving things with different methods. thanks!
  2. ๐Ÿง™โ€โ™‚๏ธ UPDATED: https://codesandbox.io/s/help-me-world-44mr3 @ZachSaucier solved it! thanks a lot man! PLEASE if someone else comes up with a better solution let me know.
  3. thank you @ZachSaucier for the suggestion. i did as the documentation explains and i get the very same result. i've updated the codeSandbox.. https://codesandbox.io/s/help-me-world-44mr3
  4. hello everyone! i wanted to show you a little excercise i made applying what i've learn with @Carl on his fantastic ScrollTrigger course. i am having a problem.. everything works fine until i click a button which fires a function that uses the ScrollTo plugin. i did add that button with the intention of giving the user the option to skip the animation (happening as they scroll) and jump to the following scene... its best if you see for yourselves what i mean. since is a VUE project i have all the logic separated on mixins. here is the link to the codeSandbox i made. https://codesandbox.io/s/help-me-world-44mr3 thanks again for reading me.
  5. awesome! i'm very happy! thank you so much @OSUblake
  6. i did like you suggested and i get this error: i did commented these 2 lines and the error is gone, expected behavior, but yeah... no kill, no clear..
  7. yes i was! ..and thanks a lot for pointing that out. ๐Ÿ‘‡ now my code looks like this and works as intended ๐Ÿ‘‡ ๐Ÿ  Home.vue <template> <div class="home"> <div class="px-3 py-3 is-fixed-1" v-if="isSignedIn"> <figure class="image is-48x48"> <router-link to="/control"> <img class="is-rounded" :src="user.photo" /> </router-link> </figure> </div> <section class="fill-viewport-1"> <div ref="separador1" class="separador-1"></div> <div ref="nombre" class="nombre"> <img src="@/assets/images/nombre.svg" alt="๐Ÿ–ผ๏ธ" /> </div> </section> <div ref="mouseContainer" class="mouse-container"> <div class="mouse"> <div class="wheel"></div> </div> </div> </div> </template> <script> import { mapState } from "vuex"; import { homeTweens } from "../mixins/homeTweens"; export default { mixins: [homeTweens], name: "Home", computed: { ...mapState("auth", ["user", "isSignedIn"]) } }; </script> ๐Ÿง™โ€โ™‚๏ธ homeTweens.js import { gsap } from "gsap"; let introTl = gsap.timeline({ paused: true, }); export const homeTweens = { mounted: function() { introTl .from( this.$refs.separador1, { duration: 0.8, xPercent: -100, } ) .from( this.$refs.mouseContainer, { duration: 0.9, yPercent: 100, autoAlpha: 0, }, "<" ) .from( this.$refs.nombre, { duration: 0.5, yPercent: 10, autoAlpha: 0, }, "<" ); this.playTimeline(); }, methods: { playTimeline() { introTl.play(); }, }, beforeRouteLeave(to, from, next) { introTl.reverse().eventCallback("onReverseComplete", function() { introTl.clear(); next(); }); }, }; now.. i wonder if there is a better way to achieve the same goal. thanks again for reading me ๐Ÿง™โ€โ™‚๏ธ๐Ÿค“
  8. i am currently managing my timelines like this (like @Rodrigo suggested above). i just noticed this "unknow component" text using the vueDev tool. i mean, everything is working but still, i wonder about this..
  9. i am wondering if there are PROS and CONS about using either #id or .classNames. this came to my mind thinking about my previous post where i had to use REFS to animate a couple elements with a timeline inside a component. but since i moved the code to a mixin i found out i could remove them and just use the #id or .className of the items and the timeline worked perfectly. so.. just out of curiosity i was wondering... are there any recomendations about this? should i use only #id tags and let the .classNames for what they are intended? thanks for reading me!
  10. THIS IS AWESOME! now my Home.vue looks like this: <template> <div class="home"> <div class="px-3 py-3 is-fixed-1" v-if="isSignedIn"> <figure class="image is-48x48" @mouseenter="cursorEnter" @mouseleave="cursorLeave" > <router-link to="/control"> <img class="is-rounded" :src="user.photo" /> </router-link> </figure> </div> <section class="fill-viewport-1"> <div id="separador" class="separador-1"></div> <div id="nombre" class="nombre" @mouseenter="cursorEnter" @mouseleave="cursorLeave" > <router-link to="/oops"> <img src="@/assets/images/nombre.svg" alt="๐Ÿ–ผ๏ธ" /> </router-link> </div> </section> <div id="cursorFollow" class="cursor-follow" ref="cursorFollow"></div> <div id="cursor" class="cursor" ref="cursor"></div> </div> </template> <script> import { mapState } from "vuex"; import { cursorTweens } from "../mixins/cursorTweens"; import { homeTweens } from "../mixins/homeTweens"; export default { mixins: [cursorTweens, homeTweens], name: "Home", computed: { ...mapState("auth", ["user", "isSignedIn"], "pagesTweensState", ["homeTweens"]), }, }; </script> and my cursorTweens.js like this: import { gsap } from "gsap"; export const cursorTweens = { data() { return { cursorTl: new gsap.timeline({ paused: true, }), }; }, mounted: function() { this.cursorTl .to(this.$refs.cursor, 0.1, { scale: 0, }) .to(this.$refs.cursorFollow, 0.1, { scale: 3, }); }, created: function() { window.addEventListener("mousemove", this.cursorAttach); }, destroyed: function() { window.removeEventListener("mousemove", this.cursorAttach); }, methods: { cursorAttach(e) { gsap.to(".cursor", 0.5, { x: e.clientX, y: e.clientY, }); gsap.to(".cursor-follow", 0.9, { x: e.clientX, y: e.clientY, }); }, cursorEnter() { this.cursorTl.play(); }, cursorLeave() { this.cursorTl.reverse(); }, }, }; i did not add homeTweens.js (here on the post) because isn't finished yet, it only has a console.log() NOW everything works like intended. thank you so much guys!
  11. i did this and it did work as expected but thats because it is not about a timeline like on the previous post... i mean, i tryed to solve my first problem with the same approach used on the example below but honestly i have no idea how to control the timeline from outside... im super lost..
  12. hello there beautiful people! first of all, this marvelous timeline is working as intended, the problem: "it's going to get huge" as i add more elements and i dont want to polute my Home.vue view with a long long non readable timeline... I WANT to move this code to a separated file. how do i do that? i know i have to create a separate file and put it somewhere like ../tweens/home.js and then import it on my view import { twnHome } from '../tweens/home' i did try this but it did not work.. im pretty sure i was close.. if this is kind of right... how do i access the TL controls (play, reverse..) ? THANKS A LOT for your time. i hope this makes sense!