Jump to content

Victor Work

  • Posts

  • Joined

  • Last visited

Everything posted by Victor Work

  1. Blake, using his great example of smooth scroll, got into a situation when using it along with ScrollMagic / GSAP, I'm trying to create a parallax system in BG image, but when it starts animating bgImage, the image gets "jumped" created an example using jQuery NiceScroll for you to see more or less the difference. I need it to be animated along with scrolling to create the Parallax effect:
  2. Omg, that's right. Congratulations @OSUblake, you're a genius. @Sahil, thank you for reminding me, and congratulations to the Specialist status, you are worthy. I will implement in my project and see how it will behave, when it is ready I will come back to show. Thank you again Guys!
  3. Hello GSAPers, I was taking a look at the new video about Workflow with Timeline, and I tried to implement a dynamic, in which I have 3 timelines and the middle one receives different colors when clicking the button, but it is not working correctly. I need the middle Box to start second in the masterTimeline and when I click the button it will restart the Timeline with the chosen color
  4. Obrigado @ Carl , mais acredito que o @ Sahil , está perto do resultado que eu preciso. Por usar uma Linha do tempo, posso atribuir várias animações em slide atual. (Thanks Sahil) Exemplo: Quando o slide 2 está ativo, inserindo um texto animado ----- Thanks @Carl, but I believe @Sahil is closer to the result I am after. Using a timeline I can add several animations in the current slide. (Thanks Sahil) Example: When slide 2 is active, inserting an animated text
  5. Hi Sahil again, thanks for the support in the other question, but I'm still not an expert in javascript and I'm trying on my pace, however I caught on in this part, draggable can understand the direction but in the scrollto is not stopping in the correct place after some interactions. This is the problem.
  6. Hi, sorry for English, I'm using the translator. What I need is to create a draggable that checks the drag direction. If it is to the right it pulls the next slide, if it goes to the left it goes to the previous slide. I tried doing with ScrollTo, but it is not working properly. Can you understand?
  7. Hello, I'm trying to create a Draggable slide, using Timeline and ScrollTo. I want it to detect Swiper to the right it rolls to the next target, and when it rolls to the left it comes back, but when it rolls the times it passes the point and it locks. I know qye maybe this is not the best way to solve this, but within my programming level was what I got.
  8. Hello, I'm having a hard time doing a .hitTest with a snap, in case I need my droppable to reach the hitTest in the position of the corner element.
  9. I'm doing this, working on a Draggable horizontal menu, but to a little lost, my final goal is similar to the one I set as an example. Thanks for replying Sahill, let's see if the moderators help us.
  10. Hello Sahil, thank you very much, it worked perfectly. Now, taking advantage of not having to open another topic, I would like a light, I'm learning to use Draggable, I'd like to do something like this: Draggable with Snap in the center of the screen, and I can work with a timeline. Example: https://richard.gs/work Is there a aglum code pen similar to this so I can study? I searched the GST YT videos but did not find anything on this level. @OSUblake @Carl @GreenSock @PointC
  11. Ola GSAPers, gostaria de saber uma forma de atribuir animações no hover em um elemento de uma determinada classe, enquanto os outros elementos desta classe recebe outra animação. In this case I want to replace .animate() with a TimelineMax():
  12. Blake, I love u Guy! <3 Working...
  13. Hello GSAP'ers I'm using Vue-Cli / Webpack template and I already managed to import ScrollMagic, but when running TimelineMax with setTween I get this error: "(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js" My webpack.base.config.js is configured like this: var $ = require("jquery"); var ScrollMagic = require("scrollmagic"); var ScrollGsap = require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'); var gsap = require("gsap"); module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { "TweenLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'), "TweenMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'), "TimelineLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'), "TimelineMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'), "ScrollMagic": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'), "animation.gsap": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'), "debug.addIndicators": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js') } And my Component.vue is like this: <script> import { TweenMax, TimelineMax } from 'gsap' import $ from 'jquery' import ScrollMagic from 'scrollmagic' import gsap from 'scrollmagic' export default { mounted () { TweenMax.from('#red', 5, {width: 0}); const tlVueGsap = new TimelineMax() .from('#blue', 5, {width: 0}) .to('#blue', 5, {x: 400}) const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: "#red" }) .setTween(tlVueGsap) .addTo(controller); } //Close Mounted } //Close Export Defautl </script> ScrollMagic is working, just the gsap.animation plugin that is not being imported Any idea how to solve it? Link of Github Project: https://github.com/Efetivos/vue_init/blob/master/src/components/GsapTest.vue Thanks Folk
  14. Hello GSAPers, I need a help, I'm trying to pause each Tween inside a Timeline where I control the scrolling with ScrollToPlugin. I need it to stop, so I can control it with the Prev / Next buttons. To toggle anchors
  15. Heloo, @Dipscom Thank you for understanding about the rs language. Very cool exportRoot (), I just could not understand how I can implement this. Do you have any simple examples of this working? Because I only found this example and found it to be very advanced. hahaha
  16. @Dipscom Hello, Sorry, I was using the translator, I'm Brazilian. I already managed to do what I wanted, in my case it was to have an animation of entrance and to have another animation of exit. Now I would like to have a way for the timeline to reverse through all the tweens and stop at the required action. Example: https://www.reed.be/ Ai click on one of the names, it does a reverse but for the timeline at the exact point
  17. @Carl, It worked Carl, Now I would like to know how to mute, instead of giving a reverse, it executes a tween to exit and then run the timeline of the button clicked
  18. Thanks @Carl I'll take a look and try to implement in my code. As soon as I have a progress, I come back to show
  19. Hello GSAPers, I need a very important help. I'd like to know the best way to make alternate transitions between Timelines. Example: I click on the Go Red button to run the red timeline, and when I click on the Go Yellow button it will reverse the current timeline and start the required timeline. Is there a way to do this only with one Timeline?
  20. Hello GSAPers to know if there is a way to do this parallax effect using GSAP, the effect of slow elements when scrolling down. Examples: http://www.loisjeans.com/es/ss2015/campaign http://lookbook.quechua.com/spring-summer-2016/en/hiking Thanks
  21. @OSUblake Thanks for the answer, but I do not want to do a routing, I just want it to be done a tween before going to a certain page. Like a timeline, first run an animation then load the page.
  22. What is the best way to use GSAP Animation before load a link with onClick Event? Example: I want a 100vh DIV to do a TransformOrigin and then load a certain page. Same does this wordpress theme using GSAP: http://efetivos.com/