vlbn

@Dennyno thank you very much for your valuable help. my code uses GSAP for the normal cursor pointers animation.. this smoke thing was just to add some fanciness.

@Dennyno i still cant figure out how to change the canvas color to white.. canvas.fillStyle = "#ffffff"; does not work... thanks!

both!

this is awesome, thanks for sharing. did you check my repo?

i made the homework.. you guys may want to check this .. @rala @akapowl @OSUblake @developer53

@rala i just coded a VUE component kinda doing what you want.. sorta say. it's funny that i decided to check this forum the same day i published my code on github hehe.. what are the odds? xD https://github.com/vlbn/fancycursor

this is beautiful, way to start the week! thank you so much!

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!

?‍♂️ 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.

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

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.

awesome! i'm very happy! thank you so much @OSUblake

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

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 ?‍♂️?

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