mr_a

I am currently renewing my portfolio. And notice that I don't have enough skills for what I want to implement. It's only about the home page of my portfolio, I would continue the rest myself. I need help for the following. the following should be done Fullscreen slider (with my works) with text animation, image / video liquid animation on hover Page transition for the selected work in the slider (without content only the transition) simple page transition for other page (like about,..) Preloader animation Hover animation of the navigation points Draggable/Scrollable endless grid (with image and on hover 'optional' gif/video) - on scrolling/dragging a little liquid effect ) I have a page here in which direction it should go.Here is the link for example (slider show, page transition, hover animation and at the bottom left when clicking on the layer icon the endless grid ) https://heycusp.com I would provide the designs as well the necessary animation. I hope someone can support me there (and can also implement this as in the example) and make my work a little easier. For info only I'm not a company or agency, i'm a ux / ui designer. Please send a message or answer to this topic (with the days you need for it and what you want for it). Cheers Mr.A

oh thanks...it works now

Hi, I have a problem ... I have built some animation now with tweenmax which also work great (simple animations). Now I wanted to build the next animation and get in this line: var squareTl = new TimelineMax({paused: true}); an error message ReferenceError: Can't find variable: TimelineMax On codepen everything works fine ... but locally comes only the error (i use VS) I have copied the current version of TweenMax from here "https://cdnjs.com/libraries/gsap" and tested if it works if I link locally. but fail <!--Main JS --> <script src="js/app.js"></script> <!--TweenMax --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> <!--<script src="js/TweenMax.min.js"></script>--> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>--> <!--jQeury --> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!-- Swiper JS --> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"></script>--> <!---------------------------------- JavaScript ----------------------------------> </body> </html> What I doing wrong? can anybody help me to fix this?

cool .. thanks first for your fast answer and your short explanation .. I had already written a similar code (see comment in the js code) but it could'nt test it if it's works .. because I always get an error message ("Can not find variable: TimelineMax) on this line : var overlayTl = new TimelineMax({paused: true}); How can I fix this? Oh and the following what I wanted to do with the click event is this: Overlay is closed: 1st hover -> rectangles have a greater distance to each other 2. Click -> Overlya opens and Hover state is paused or hover state is now default. Overlay open: 1.Hover: hover animation is played backwards 2. Click: Overlay disappears and hover state is default again Here is a short animation:

Hi, I want to open an overlay by clicking and if I click again close again. currently I can only open it but not close it. have now tried several variations and looked in other threads and tried unfortunately it doesn't work. and if i clicked and want to close it my animation (viewHover will be played backwards) and then the click animation will play backwards. So: in the closed state I have: mouseover, mouseout, click and the open state also Can someone tell me how to do it the best way. Would appreciate your help. here is the relevant part of my code: HTML <div class="overlay" id="over"></div> <div class="nav_center"> <a href="#" class="icon_nav" id="view_wrap" onmouseover="viewHover();" onmouseout="viewHover();" onclick="click"> <span class="square square1" id="square1"></span> <span class="square square2"></span> <span class="square square3"></span> <span class="square square4"></span> </a> </div CSS *{ padding:0; margin:0; background-color: #000000; } .nav_center{ display:flex; justify-content: center; align-items: center; } .icon_nav{ width: 40px; height: 40px; padding: 13px; transition: transform 0.5s ease-in-out; } .square{ position: absolute; width: 5px; height: 5px; background-color: #fff; } .square1{ margin: 0px 8px 8px 0px; transform: translate(0px, 0px); } .square2{ margin: 0px 0px 8px 8px; transform: translate(0px, 0px); } .square3{ margin: 8px 8px 0px 0px; transform: translate(0px, 0px); } .square4{ margin: 8px 0px 0px 8px; transform: translate(0px, 0px); } .overlay{ position: absolute; z-index:-1; width:100%; height: 100%; background-color:#333; top:-110%; } JS // Change View Animation var view = document.getElementById('view_wrap'); // Events var hoverView = view.addEventListener('mouseover', viewHover); var hoveroutView = view.addEventListener('mouseout', viewHoverOut); var clickView = view.addEventListener('click', click); // Squares var box1 = document.getElementsByClassName("square1"); var box2 = document.getElementsByClassName("square2"); var box3 = document.getElementsByClassName("square3"); var box4 = document.getElementsByClassName("square4"); // Overlay var menuView = document.getElementsByClassName("overlay"); // View mouseover function viewHover(){ TweenMax.to(box1, .5,{x:"-2px", y:"-2px", ease: Power2.easeInOut}); TweenMax.to(box2, .5,{x:"2px", y:"-2px", ease: Power2.easeInOut}); TweenMax.to(box3, .5,{x:"-2px", y:"2px", ease: Power2.easeInOut}); TweenMax.to(box4, .5,{x:"2px", y:"2px", ease: Power2.easeInOut}); }; // View mouseout function viewHoverOut(){ TweenMax.to(box1, .5,{x:"0px", y:"0px", ease: Power2.easeInOut}); TweenMax.to(box2, .5,{x:"0px", y:"0px", ease: Power2.easeInOut}); TweenMax.to(box3, .5,{x:"0px", y:"0px", ease: Power2.easeInOut}); TweenMax.to(box4, .5,{x:"0px", y:"0px", ease: Power2.easeInOut}); }; // Close open function click(){ TweenMax.to(menuView, 1, {top:"-10%", ease: Power3.easeInOut}); } /* var menu = new TimelineMax({paused:true, reversed:true}) menu .to(menuView, 0.75, {top:"10%", ease:Power2.easeInOut}) function click() { menu.reversed() ? menu.play() : menu.reverse(); } */