data animations

hello semicolon team

sometimes I "don't see the forest for the trees" :-(

I want to animate the typo3 logo on this page and played around with data speed and delay
but it does not have any impact what ever value I enter same speed same delay.

sorry to be a pest, must be an eas one for you but I don't see it atm.

rgds and meryy x-mas
guido

omg, never mind
I checked the difference to other working samples and now it is clear
as said "the forest and all these trees" ;-)

but something else please

I did not find a working example for a typewriter effect in the canvas package
so I tried one from the web. it works as you can see
as mentioned already I am very JS-skilled, databases and php etc are my domain

1.) is the code I use fine with you or do you have a better solution for the typerwiter effect?
2.) what about the css spans, that hide the slashes in small mobile versions, any solution for that?

rgds
guido

and another problem solved

2.) the css spans
I just places them before each item, and have found solutions for all the small devices

remains 1.) is the code I use fine with you or do you have a better solution for the typerwiter effect?
I am quite sure you have a better solution for it ;-)

rgds
guido

hello semicolon

this one gave me headaches all night.now it's nearly 7am on x-mas eve and I give up :-(

https://www.dropbox.com/s/yjupu6ngnjt7szx/dwcc_header_animation.mov?dl=0

I have put an animation "zooIN" on the header.
this site is going to be b/w only all over and will be very clean.
so I thought it would be a nice effect to zoom in the header when the typewriter headline and emphasis-title is done.

looks very nice, but doesn't work. wehn scrolling it dissapears completely.
and I dunno why :-( ... please help.

rgds and happy holiday
guido

hello semicolon

I do not understand what you mean by 'We have tried checking out your Website but unfortunately, it returns a Privacy Error warning.'
I is proper accessible here.
or do you mean the ssl/hpps warning, that the certificate does not match the domain?
that's correct, the domain is a development domain and the ssl-cert is from the hoster the default one.
you can easily accept it.

thx for sour colutions.
awesome, workz fine, thx a lot.

and I do have another little glitch I do not come around.

I minimized the menu to a sighle mega-menu-comtainer, it is triggered by a css only animated hamburger-menu-icon.
all workz fine, apart 1 thing.

the menu closes not only when clicking the icon gain, but also when clicking somewhere in the page.
It closes so to say on a click on body, but schall only close when clicking the icon again.

may I ask oyu to have a look at that too please.

and if you still cannot enter the site to check, please give me some more information / screenshots / error messages.
for futher questions it doe not make sense and would be easier for you if you could look directly into the devolpment.

rgds tand alway thx thx thx
guido

hello semicolon

thx for your patience with me.
I cannot understand why you are not able to view the page, as it works fine here. I have an idea though.
the _static folder is inculded into typo3-cms and there are a couply of .htaccess files managing access and CSP restrictions.
maybe that is not setup to work with chrome. but before investigateing this deeper I have setup a new subdomain

here is really only the the static versions of Canvas and my dev folder, all just pure statuc html from your package.

http://semicolon.web.my1.cc/_html/ | this is the original HTML folder from your package V 6.1.4
http://semicolon.web.my1.cc/_static/ | this is my playground for themeing based on the files from _html/

you might want to try this URL http://semicolon.web.my1.cc/_static/ and maybe even in firefox rather than chrome for testing.
on top I have zipped the _static/ folder, it isn't that big, so in any case it does not work you can check the files and directly
https://www.dropbox.com/s/o07acqc554zelyh/_static.zip?dl=1

in a small screencast I have recorded the 2 issues I still have.
https://www.dropbox.com/s/aqs4vhngvgusefz/data-offset_and_hamburger-menu.mov?dl=0

A) data-offset still not working for me
B) hamburger menu icon issue

rgds and sorry for all this inconvenience
guido

dear semicolon

thx fo the quick fix of the menu, workz as expected.
and for the data offset,I will meanwhile use as proposed the JS fix from earlier.

but please do not apologise always

you are doing an awesome support job
your solutions are for 100%, there isn't a problem that had not been fixed
your response time is very fast

I cannot stop repeating how happy I am with the canvas and that other companies should follow your example when it comes to support !!!

rgds and stay gealthy
guido

thx, you are really supporting your 'baby' - great.

FYI
another thingy as you are working on the data-scrollto

I have updated http://semicolon.web.my1.cc/_static/
as you can see the typewriter effect has links now
these are build with data-scrollto as well, but do not work at all :-(
whilest the button dev-work beneath as well as the one-page-arrow do

that data-scrollto seems to have more than one problem

rgds
guido

FYI

I tried as well the canvas text rotator from bottom of docu
http://docs.semicolonweb.com/docs/shortcodes/text-rotators/#docs-snippet-text-rotator-with-typing-animation

I altered the code for data-scrollto like so:

<h1>
	<span class="text-rotater" data-separator="|" data-speed="170" data-typed="true" data-shuffle="false" data-loop="false" data-cursor="false">
		<span class="t-rotate text-uppercase">
			/ <a href="#" data-scrollto="#el-design" data-easing="easeInOutExpo" data-speed="1250" data-offset="65">design</a>
		</span>
	</span>
</h1>

same same, no data-srcollto :-(
maybe that is easier for you to adjust/fix data-scrollto
the I will use your code instead of my custom_home.js

rgds
guido

I have completele taken out my custom_home.js and used this code from your docu with added scrollto function:

<h1>
	<span class="text-rotater" data-separator="|" data-speed="170" data-typed="true" data-shuffle="false" data-loop="false" data-cursor="false">
		<span class="t-rotate text-uppercase">
			/ <a href="#" data-scrollto="#el-design" data-easing="easeInOutExpo" data-speed="1250" data-offset="65">design</a>
		</span>
	</span>
</h1>

and it still is not scrolling please check http://semicolon.web.my1.cc/_static/

this is your code and no custom_home.js included

ahhhh sorry
now I got it

jQuery(document).ready(function() {
setTimeout(typeWriter, 300);
setTimeout(function(){
SEMICOLON.widget.linkScroll();
}, 500);
});

this workz perfect !!!

stupid me, sorry
thx a lot

so now we are stall back to the offsets right?

rgds
guido

Just the Offset Part needs to be integrated.

of course, stupid me, it workz superduper !!! thx

regarding the data-scroll-offset ...
no hustle at all even a week will be fine. as mentioned atm the development is static
now I will have to integrate all this in TYPO3, so take your time

thx and sorry to bother
guido

unfortunately there is one more thing that doesn't work

on http://semicolon.web.my1.cc/_static/ I have inserted the custome_home.js

jQuery(document).ready(function() {
    setTimeout(typeWriter, 300);
    setTimeout(function(){
		SEMICOLON.widget.linkScroll();
	}, 500);
});

the page loads, the typewriter-effect workz
I wait till it it is fully typed and click on the first term DISCOVER and it scrollst to data-offset 65px ... fine so far

but the other 3 terms don't scroll :-(

rgds
guido

got it

var i = 0;
var j = 0;
var txt = ['Discover','Design','Code','Publish'];
var seperator = ' / ';
var dataSrcollTo = ['#el-discover','#el-design','#el-code','#el-publish'];
var speed = 170;    

function typeWriter() {
      if (i < txt[j].length) {
        if(! $("#typeIT-c"+j).length){
            $("#typeIt").append("<a href='#' data-scrollto=\""+dataSrcollTo[j]+"\" data-easing=\"easeInOutExpo\" data-speed=\"1250\" data-offset=\"65\" id='typeIT-c"+j+"'></a>");
        }
        $("#typeIT-c"+j).append(txt[j].charAt(i++));
        setTimeout(typeWriter, speed);
      }
      else{
        i=0;
        if(++j < txt.length) {
            $("#typeIt").append(seperator);
            setTimeout(typeWriter, speed);
        }
      }
      setTimeout(function(){
	SEMICOLON.widget.linkScroll();
      }, 500);      
    }   

jQuery(document).ready(function() {
    setTimeout(typeWriter, 300);
});

I swapped the the call of SEMICOLON.widget.linkScroll(); to the end of the typewriter function and now all 4 terms scroll propperly

ok, that is solved now, thx a lot again and again and again
now I can start integrating in typo3 and atm only the data-offset is on my list

rgds
guido

yep that workz too and is already integrated in http://semicolon.web.my1.cc/_static/

var i = 0;
var j = 0;
var txt = ['Discover','Design','Code','Publish'];
var seperator = ' / ';
var dataSrcollTo = ['#content','#content','#content','#content'];
var speed = 100;    

function typeWriter() {
      if (i < txt[j].length) {
        if(! $("#typeIT-c"+j).length){
            $("#typeIt").append("<a href='#' data-scrollto=\""+dataSrcollTo[j]+"\" data-easing=\"easeInOutExpo\" data-speed=\"1250\" data-offset=\"65\" id='typeIT-c"+j+"'></a>");
            SEMICOLON.widget.linkScroll();
        }
        $("#typeIT-c"+j).append(txt[j].charAt(i++));
        setTimeout(typeWriter, speed);
      }
      else{
        i=0;
        if(++j < txt.length) {
            $("#typeIt").append(seperator);
            setTimeout(typeWriter, speed);
        }
      }
    }   

jQuery(document).ready(function() {
    setTimeout(typeWriter, 300);
});

these were resolved.

because you guys are the best !!! thx

hello semicolon

please don't get me wrong, as ususal I have still plenty of time and no need to rush.
I just wanted to ask humbly if you still have the data-offset for data-scrollto on your list, or did I miss sth?

rgds and be "negative" (sth. I never thought I would say to s.b. :-)
guido

hey, no need to rush it
as said I have still plenty of time, and was just wondering if I missed sth.
all fine, please take your time.

rgds
guido

no hurry as said, better code and test it right and take another week, that have to touch it over and over again

I just wanted to make sure that it was not me missing out sth.

rgds
guido

hi guys

sorry for the late response, family affairs kept me busy.

I tested the plugins.linkscroll.js and unfortunately it does still not work :(

as I assume that it is yet not integrated in the plugins.js nor in the plugins.min.js I went for the 'AJAX Lazy Loading' js as described in http://docs.semicolonweb.com/docs/getting-started/javascript/ and tested it with data-offset="0" data-offset-lg="300" in order to see the difference clearly ... no chance.

I will make a detailed sample these days and send you the url. might take a bit of time, as said, some family affairs keep me busy.

just a quick info on top

<a href="#" data-easing="easeOutExpo" data-scrollto="#content" data-offset="0" data-offset-lg="300"><img src="images/logo.jpg" alt="Logo" data-animate="zoomIn" data-delay="2950" /></a>

this is the code snippet I tested it with, and it did not work.

while checking it against this code, it also does not work anymore and scrolled always to 300

<div class="d-none d-lg-block">
    <a href="#" data-easing="easeOutExpo" data-scrollto="#content" data-offset="300"><img src="images/logo.jpg" alt="Logo" data-animate="zoomIn" data-delay="2950" /></a>
</div>
<div class="d-lg-none">
    <a href="#" data-easing="easeOutExpo" data-scrollto="#content" data-offset="0"><img src="images/logo.jpg" alt="Logo" data-animate="zoomIn" data-delay="2950" /></a>
</div>

then i placed back the orginal plugins.linkscroll.js and the code above hideing the one or the other works.
if I had only that one scrollto on one particular link, I could live with it, but unfortunately I have many more anchors I would like to use the plugins.linkscroll.js with.

but gimme some time pls and I will setup a dedicated sample so you cold then verify if the problem is on my site.

rgds
guido

ok, here a quick one

https://www.dropbox.com/s/40nmrtabugmhi6x/canvas-package.zip?dl=1

with data-offset="0" data-offset-lg="300" I would expect, that

• up to max screen width 992px (when mobile menu is shown) it scrolls to 0
• min screen width 992px (when normal menu is shown) it scrolls to 300

just start the blank-page.html in root of the package and check it out

rgds
guido

hi semicolon

that is working perfect now, have tested it so far only with
data-offset="0" data-offset-lg="60"
but am sure it will work for all data-offset-XXX now, will make deeper testing when I have more time
atm I am so occupied with getting vaccination appointments for my 85+ yr old parents and those off my wife too and some other family affairs

would it be a big deal for you to send me a plugins.js with his one integrated please?
or a brief explanation how I could do that

rgds, thx and stay healthy
guido

PS

plugins.js is fine for me as I will minify in CMS anyway

very cool, thx a lot

rgds
guido